Image Offset in Frame

[Sannyasin Brahmanathaswami]

@ Alejandro:

Thanks.. very clear… 

@paul hibbert

Thanks for the reminder on Scott's masking stack.. .that's what was sticking my mind that I could not find… I downloaded hist stack again.

but it seems we don't even need a graphic on top of the image or have to concern ourselves with these inkEffects, at least in this use case…as just grouping the image itself works with the clipstoRect.

I just tested using Alejandro's  "mini manual/method" with multiple images 

USE CASE: these will be images on the left of a vertical scrolling group…. thumbs for books, album covers of audio etc.) 

Very typical UI for vertical scrolling groups with rows of image left and text right… 

-- create one image, grouped, 
-- resize the group, position the book cover thumbnail in the top left (crops the right and bottom) 
-- zero out border and margin (a nuisance default for groups, IMHO). 
-- comment out the grab me script (we don't want users to inadvertently move these.)
-- Option copy seven of these into a column down…with 10 px in between them
-- group all those. 

     # in actual app run time the above two steps would be done dynamically 
     # copy a "row" group template…  place it below the last one… and then group them
     # Perhaps DataGrid2 will be the preferred tool for this if runtime generation of rows is fast.

-- group is now colum of  8 coverhumbs 830 px  tall. 
-- set height of this group to 500, 
-- test from msg box: set the scroll of this group to say… 200… works beautifully. 
-- vertical scroll bar works also but not wanted in this scenario.

Since we will create these dynamically run time.. I also tried "set the filename over img cover-thm-2 to url "….."  and it worked.. the image was imported and placed as it was saved in the group rect… in it's "cropped" position. his worked even with the image with negatiive x-y offsets inside the group  i.e. I was worried the x,y position would default to the 0,0 (topleft) of the clipped rect… but it did not, it was imported and kept it's negative offsets inside the group.

Awesome!

So should work on Mobile too and, should one want to create a UI/UX to emulate some layout program to operate like InDesign or Sketch for WSIWIG design etc. for this it would be very easy to do… 

BR…

On 11/16/17, 12:39 PM, "use-livecode on behalf of Alejandro Tejada via use-livecode" <use-livecode-bounces at lists.runrev.com on behalf of use-livecode at lists.runrev.com> wrote:

    I was wrong. There is at least 3 (maybe more)
    different ways to clip an image using a group:
    
    Method 1 using lockLocation:
    Method 2 using clipstorect
    Method 3 using boundingRect
    
    The following detailed description is useful mostly
    for newcomers in this platform...
    
    1) create a new stack
    2) import an image
    3) set the script of this image to:
    ------------------------
    on mousedown
    grab me
    end mousedown
    -------------------------
    4) group this imported image
    5) reduce the size of this group and
    6) Choose one of these options:
    
    Option 1) - set the locklocation of this group to true or
    Option 2) - set the clipstorect of this group to true or
    Option 3) - set the boundingRect of this group to the rect of this group
    
    If you select the group with the "Edit" tool, paste the previous script in
    the message box, change the phrase "this group" for "selobj" (without
    quotes)
    and press enter:
    
    set the locklocation of selobj to true
    
    set the clipstorect of selobj to true
    
    set the boundingRect of selobj to the rect of selobj
    
    Each option have it's own advantages. Test them and choose
    one that works for your purpose.
    
    By the way, Where could I find the boolean property "clipstorect"
    within the Property Inspector?
    
    Al
    _______________________________________________
    use-livecode mailing list
    use-livecode at lists.runrev.com
    Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
    http://lists.runrev.com/mailman/listinfo/use-livecode