Page 1 of 1

Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 4:01 am
by Gage
Hello all!

Assume I have a movable image as the front layer on my card. Behind it lies a larger rectangle image, whose rect should confine the loc of the movable image.

I want to figure out a way to only render the portion of the movable image that lies within the rect of the larger rectangular image behind it.

In other words, since it would be possible to move the loc of the moving image right to the edge of the background rectangle, there are a bunch of viable locations where the smaller movable image is both inside of and outside of the bounds of the rectangle, and I want only the parts where the two images overlap to be shown, preferably without having a whole gang of different images drawn that are called in place of the original as the image approaches an edge.

Hope that's clear! It would seem to be a simple enough function, perhaps contained somewhere in all of the Blending/BlendLevel stuff (the secrets of which are pretty foreign to me).

Thanks for the support!
Phil E.

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 7:43 am
by Simon
Hi Phil,
Why wouldn't the larger rect be in front of the image?
Work with the border size and make it big, or use a png with it's center at 0 opacity.

Simon

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 8:19 am
by [-hh]
..........

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 8:28 pm
by Gage
Simon wrote:Hi Phil,
Why wouldn't the larger rect be in front of the image?
Work with the border size and make it big, or use a png with it's center at 0 opacity.

Simon
Simon,
The larger rect is a map, and I am moving a circular image around on it, so the circular image must be in front. I want it to be able to be placed anywhere on the map, including up to the edges, but IF it is placed where the circle extends beyond the edges of the map, I want only that part of the circle not to be visible. The circle was likely just created during runtime, so it will be the foremost layer.

Not sure what you're suggesting... what does it mean to have a .png with its center at 0 opacity?

Thanks for helping!
Phil E

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 8:34 pm
by Gage
[-hh] wrote:A different approach may be the following.

What you are looking for is part of this stack (imageZoomAndFit)
http://forums.livecode.com/viewtopic.ph ... 71#p102966

Load an image (with button "set file name"), zoom it in (with button "-") and controlClick it in order to drag it inside its frame. This move can certainly also be scripted and then controlled by a button.
The technique used is to group an image and setting the rect of the group as 'frame' (= the image is 'clipped' by the rect of the group).
[-hh],
I will take a look at this. I should mention that the "image" I want to move around is *actually* a group containing 2 graphics. It's custom scripted as a circular timer, and I want to be able to drag it around by touch in the mobile environment after the timer group is created.

Hopefully that would still work with the stack.

Thanks for your help!
Phil E.

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 8:45 pm
by Gage
[-hh],
That is a really cool stack! I'm impressed.

I'm trying to figure out how I can use it to clip some parts of the group of graphics if the group is moved to the edge of my existing image. I have no external image whose filename I can import, and no Ctrl-Click function on mobile touch (though I could probably just re-script that to respond to mouseDown/mouseMove).

Regards,
Phil E.

Re: Rendering Selective Portions of an Image

Posted: Wed Jun 25, 2014 9:04 pm
by bn
Hi Phil,

Scott Rossi did a stack "Spotlight". You find it at
http://www.tactilemedia.com/
go "software" then "all tutorials.

I made variant of Scott's stack that also lists the inks

it is too large to upload here:

http://berndniggemann.on-rev.com/twohol ... k.livecode

Maybe this is getting close to what you want. If this is anywhere near one could tweak the stack.

Kind regards
Bernd

Re: Rendering Selective Portions of an Image

Posted: Thu Jun 26, 2014 4:48 pm
by jacque
I may not understand correctly, but it seems pretty easy:

1. Group the map and set the lockloc of the group to true
2. Create (or copy) the circular group inside the map group

That's it. Whatever part of the circular group is beyond the edges of the map will not draw. The important part is to be sure that the draggable group is inside the map group.

Re: Rendering Selective Portions of an Image

Posted: Tue Jul 01, 2014 8:06 pm
by Gage
Bernd,

Thank you!


Jacque,

That sounds very simple; I think it will work. How would I create the group inside of another group? Right now I am using:

clone group pGroup of this card

Seems like I would just add something after that, such as '...into group "My Map" of this card'
...or something like that?

Thanks all for your input!
Phil E.

Re: Rendering Selective Portions of an Image

Posted: Tue Jul 01, 2014 9:14 pm
by jacque
Close. Use this:

copy group pGroup to group "myMap"

Re: Rendering Selective Portions of an Image

Posted: Tue Jul 01, 2014 9:16 pm
by Gage
Jacque,

You're a star! Thanks so much. I think this will do it; I knew it was something simple!

Many thanks to all,
Phil E.

Re: Rendering Selective Portions of an Image

Posted: Tue Jul 01, 2014 11:34 pm
by Gage
Well, it looks as though the copied object must be an object and not a group if the target destination of the copy command is a group.

I got that from the Copy command documentation.

Any ideas about how to get a group into another group via code?

Phil E.

Re: Rendering Selective Portions of an Image

Posted: Tue Jul 01, 2014 11:36 pm
by Gage
Never mind... the ghost in the machine is playing tricks on me.

That's working perfectly!!

Phil E.