Discussion:
Would like to show a photo through a polygon shape
Roger Eller
2013-10-20 20:03:40 UTC
Permalink
How might I put a picture into a triangle shape with the points:

34,268

224,268

127,365

34,268

If it were for one time use, I'd just use gimp or photoshop. This will be
a picture that was just taken, or chosen from the library.

~Roger
Mark Schonewille
2013-10-20 20:19:08 UTC
Permalink
Hi Roger,

Fill the polygon, export to PNG, set the text of an image object to the
PNG, take the alpha mask from the image object and set the alpha mask of
the image object containing your photo to it.

--
Best regards,

Mark Schonewille

Economy-x-Talk Consulting and Software Engineering
Homepage: http://economy-x-talk.com
Twitter: http://twitter.com/xtalkprogrammer
KvK: 50277553

Use Color Converter to convert CMYK, RGB, RAL, XYZ, H.Lab and other
colour spaces. http://www.color-converter.com

Buy my new book "Programming LiveCode for the Real Beginner"
http://qery.us/3fi

Fill out this survey please
http://livecodebeginner.economy-x-talk.com/survey/
Post by Roger Eller
34,268
224,268
127,365
34,268
If it were for one time use, I'd just use gimp or photoshop. This will be
a picture that was just taken, or chosen from the library.
~Roger
Paul Hibbert
2013-10-20 20:38:43 UTC
Permalink
Hi Roger,

Another method, if the image is the correct size to suit the polygon (or can be adjusted to fit) you can also…

set the backgroundPattern of grc "myPolygon" to the ID of image "myImage"

You have less control over the location of the image within the polygon, it's just aligned with the topLeft so if you need to control the location Mark's suggestion may work out better, of course if the image is smaller than the polygon it will just repeat.

Paul
Post by Mark Schonewille
Hi Roger,
Fill the polygon, export to PNG, set the text of an image object to the PNG, take the alpha mask from the image object and set the alpha mask of the image object containing your photo to it.
--
Best regards,
Mark Schonewille
Economy-x-Talk Consulting and Software Engineering
Homepage: http://economy-x-talk.com
Twitter: http://twitter.com/xtalkprogrammer
KvK: 50277553
Use Color Converter to convert CMYK, RGB, RAL, XYZ, H.Lab and other colour spaces. http://www.color-converter.com
Buy my new book "Programming LiveCode for the Real Beginner" http://qery.us/3fi
Fill out this survey please
http://livecodebeginner.economy-x-talk.com/survey/
Post by Roger Eller
34,268
224,268
127,365
34,268
If it were for one time use, I'd just use gimp or photoshop. This will be
a picture that was just taken, or chosen from the library.
~Roger
_______________________________________________
use-livecode mailing list
http://lists.runrev.com/mailman/listinfo/use-livecode
J. Landman Gay
2013-10-20 20:49:12 UTC
Permalink
Resize the image to the rect of the triange (if you want.) Set the
graphic's opaque to true. Set the backpattern of the graphic to the id
of the image.

The backpattern will be drawn from 0,0, so that's the reason to resize
in order to get most of it to display inside the graphic.
--
Jacqueline Landman Gay | ***@hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Roger Eller
2013-10-20 21:33:47 UTC
Permalink
These are all great suggestions. For a permanent masked image, I would use
the text of the image, but for just a quick display within a shape, the
backPattern does the job nicely. Thank you all - Mark, Paul, and
Jacqueline!

~Roger
Alejandro Tejada
2013-10-20 21:53:50 UTC
Permalink
Hi Bern,
you could also set the background pattern/fill pattern of the polygon to
the image
You might have to fiddle with the size of the image/polygon to get it
right.
The "Hidden Point technique to mask an image" posted by Scott Rossi
is closely related to your solution:

http://runtime-revolution.278305.n4.nabble.com/Hidden-point-technique-to-mask-an-image-td2270248.html

Have a nice week!

Al



--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-through-a-polygon-shape-tp4671281p4671291.html
Sent from the Revolution - User mailing list archive at Nabble.com.
Roger Eller
2013-10-20 22:18:20 UTC
Permalink
Oh cool. Thanks!

~Roger
Post by Alejandro Tejada
Hi Bern,
you could also set the background pattern/fill pattern of the polygon to
the image
You might have to fiddle with the size of the image/polygon to get it
right.
The "Hidden Point technique to mask an image" posted by Scott Rossi
http://runtime-revolution.278305.n4.nabble.com/Hidden-point-technique-to-mask-an-image-td2270248.html
Have a nice week!
Al
--
http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-through-a-polygon-shape-tp4671281p4671291.html
Sent from the Revolution - User mailing list archive at Nabble.com.
_______________________________________________
use-livecode mailing list
Please visit this url to subscribe, unsubscribe and manage your
http://lists.runrev.com/mailman/listinfo/use-livecode
Scott Rossi
2013-10-21 00:20:46 UTC
Permalink
Hi Roger:

Try this stack (in your message box):
go url
"http://www.tactilemedia.com/site_files/downloads/masking_options.rev"


Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design
Post by Roger Eller
34,268
224,268
127,365
34,268
If it were for one time use, I'd just use gimp or photoshop. This will be
a picture that was just taken, or chosen from the library.
~Roger
_______________________________________________
use-livecode mailing list
Please visit this url to subscribe, unsubscribe and manage your
http://lists.runrev.com/mailman/listinfo/use-livecode
Alejandro Tejada
2013-10-21 01:05:18 UTC
Permalink
Hi Scott,
Post by Scott Rossi
go url
"http://www.tactilemedia.com/site_files/downloads/masking_options.rev"
I noticed that you do not include the option of
using the Hidden Point technique to mask an
image in your stack.

Did you find a problem applying this method?

Thanks in advance!

Al



--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-through-a-polygon-shape-tp4671281p4671299.html
Sent from the Revolution - User mailing list archive at Nabble.com.
Roger Eller
2013-10-21 21:06:35 UTC
Permalink
I was going with backPattern until I saw this. Ink effects are very useful!
I like that the image can be repositioned, as I wanted the picture
centered, but backPattern has no option for setting a location. Thanks
Scott.

~Roger
Post by Scott Rossi
go url
"http://www.tactilemedia.com/site_files/downloads/masking_options.rev"
Regards,
Scott Rossi
Creative Director
Tactile Media, UX/UI Design
Post by Roger Eller
34,268
224,268
127,365
34,268
If it were for one time use, I'd just use gimp or photoshop. This will be
a picture that was just taken, or chosen from the library.
~Roger
_______________________________________________
use-livecode mailing list
Please visit this url to subscribe, unsubscribe and manage your
http://lists.runrev.com/mailman/listinfo/use-livecode
_______________________________________________
use-livecode mailing list
Please visit this url to subscribe, unsubscribe and manage your
http://lists.runrev.com/mailman/listinfo/use-livecode
Richmond
2013-10-22 06:09:13 UTC
Permalink
I have just had a bit of fun that may help towards a solution:

I imported an image into a stack and then made a 5-sided regular polygon
graphic on top of it.

I made the polygon graphic transparent (Polly Gone !!!!)

The I started messing around with blending/ink (that discrepancy with
naming between the prefs palette
and scripting can be a bit misleading) and found that

blendDstAtop and blendDstIn (who invented those awful names?) make
the area inwith the rect of the regular
polygon graphic but outwith the polygon graphic itself black, producing
a frame (of sorts).

The snag is that all the image on the layer below the polygon graphic
that is not masked by the black area is visible.

Richmond.
Alejandro Tejada
2013-10-23 03:09:28 UTC
Permalink
Hi Roger,

Test these scripts too, before using a group:

1) Create a new stack
2) Create a polygon graphic
and set the points of it to:

0,0

34,268
224,268
127,365
34,268

3) import an image into this stack,
put the image in a corner, where it does not
hide the graphic and:

set the backpattern of grc 1 to the id of img 1

(now, the imported image is cropped within
the graphic)

4) set the script of the graphic to this variation
of Scott Rossi script to move the first point of
the graphic and (at the same time) move the
image within the graphic:

local lpoints,tClick

on mouseDown
put the points of me into lpoints
put mouseH(),mouseV() into tClick
end mouseDown

on mouseMove X,Y
if tClick = "" then exit mouseMove
put (X - item 1 of tClick,Y - item 2 of tClick) into line 1 of lpoints
set the points of me to lpoints
end mouseMove

on mouseUp
put "" into tClick
end mouseUp

on mouseRelease
put "" into tClick
end mouseRelease

When you click inside the graphic and move the mouse
the image will move within the graphic, just as you
requested.

But... there is a small glitch. The background image
"reset" it's position when you try to move it again.

Why does this happen?
Why the image "resets" it's position?
Does exists a workaround for this?

Thanks in advance!

Al






--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-through-a-polygon-shape-tp4671281p4671373.html
Sent from the Revolution - User mailing list archive at Nabble.com.
Scott Rossi
2013-10-21 19:31:57 UTC
Permalink
[ I didn't see the other responses until today -- the mail server enjoys
bumping me off about once a week and have to resubscribe to the list ]

Hi Al:

A graphic with discontiguous points is just another way to create a vector
mask.

The reason why a group with ink effects might be a preferable masking
solution is the image can be positioned/resized independently of the mask.
This is demonstrated in the sample stack. As Jacque pointed out, when
using a backPattern, the image is always drawn from the topLeft of the
object and is fixed. Also a backPattern does not support translucency,
while a group can. But using a group can be a bit more work.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design
Post by Alejandro Tejada
Hi Scott,
Post by Scott Rossi
go url
"http://www.tactilemedia.com/site_files/downloads/masking_options.rev"
I noticed that you do not include the option of
using the Hidden Point technique to mask an
image in your stack.
Did you find a problem applying this method?
Thanks in advance!
Al
--
http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-
through-a-polygon-shape-tp4671281p4671299.html
Sent from the Revolution - User mailing list archive at Nabble.com.
_______________________________________________
use-livecode mailing list
Please visit this url to subscribe, unsubscribe and manage your
http://lists.runrev.com/mailman/listinfo/use-livecode
Alejandro Tejada
2013-10-23 04:27:38 UTC
Permalink
Hi Roger,

Yes! This script works fine, without glitches.
Test it on the graphic and told us your results:

local lpoints,tClick,tFirstPoint
-- based on Scott Rossi script for masking images

on mouseDown
put mouseH(),mouseV() into tClick
put the points of me into lpoints
put line 1 of lpoints into tFirstPoint
put "mouseDown" & cr & lpoints & cr & cr into fld 1
end mouseDown

on mouseMove X,Y
if tClick = "" then exit mouseMove
put (X - item 1 of tClick,Y - item 2 of tClick)
put (X - item 1 of tClick) + item 1 of tFirstPoint,(Y - item 2 of
tClick) + item 2 of tFirstPoint into line 1 of lpoints
set the points of me to lpoints
end mouseMove

on mouseUp
put "" into tClick
end mouseUp

on mouseRelease
put "" into tClick
end mouseRelease




--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/Would-like-to-show-a-photo-through-a-polygon-shape-tp4671281p4671379.html
Sent from the Revolution - User mailing list archive at Nabble.com.
Continue reading on narkive:
Loading...