Shaping an image to fit in a polygon
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Shaping an image to fit in a polygon
This is my attempt at some sort of answer to David Epstein:
"I am trying to create an image that will appear to have the shape of some arbitrary polygon. The idea is to set the image's alphaData so that pixels within the polygon are opaque, and those outside the polygon are transparent. The scripts below create a rectangular image of whatever is under the polygon's enclosing rectangle, and then adjust the alphaData of that new image. But while the new image gets trimmed a bit, the result does not match the shape of the designated polygon. Any thoughts?
"David Epstein
"on action gID ## gID is the short id of the polygon
import snapshot from rectangle globalRect(the rect of control id gID)
put the short id of image (the number of images) into imID
set the width of image id imID to the width of grc id gID
set the height of image id imID to the height of grc id gID
set the loc of image id imID to the loc of grc id gID
set the polyCrop of image id imID to gID
end action
"function globalRect theRect
return globalLoc(item 1 to 2 of theRect),globalLoc(item 3 to 4 of theRect)
end globalRect
"setProp polyCrop polyID
-- crop target image's alphadata to show only points within grc id polyID
put the filled of grc id polyID into fillState
set the filled of grc id polyID to true
put the rect of the target into r
put numToChar(255) into P ## opaque
put numToChar(0) into T ## transparent
repeat with y = 1+item 2 of r to item 4 of r ## SEE NOTE*
repeat with x = 1+item 1 of r to item 3 of r
put x,y into myPoint
if within(grc id polyID,myPoint) then put P after hold else put T after hold
end repeat
end repeat
set the filled of grc id polyID to fillState
set the alphaData of the target to hold
end polyCrop
"* NOTE: the "1+" is these statements is my effort to step through the exact number of pixels in the width and height of the image. The number of values in the series (item 1 of the rect of the image) to (item 3 of the rect of the image), inclusive, is 1+ the width of the image. (But I am not really sure whether to add 1 to the first value or subtract 1 from the last value)."
NOW, I, a well-known lazy slob, drew a polygone graphic with the built-in thingy-bob on the revTools palette:
- -
This, already, has all the area inwith the bounding rect but outwith the polygon as such transparent:
- -
So, obviously;
1. I am misunderstanding the question.
"I am trying to create an image that will appear to have the shape of some arbitrary polygon. The idea is to set the image's alphaData so that pixels within the polygon are opaque, and those outside the polygon are transparent. The scripts below create a rectangular image of whatever is under the polygon's enclosing rectangle, and then adjust the alphaData of that new image. But while the new image gets trimmed a bit, the result does not match the shape of the designated polygon. Any thoughts?
"David Epstein
"on action gID ## gID is the short id of the polygon
import snapshot from rectangle globalRect(the rect of control id gID)
put the short id of image (the number of images) into imID
set the width of image id imID to the width of grc id gID
set the height of image id imID to the height of grc id gID
set the loc of image id imID to the loc of grc id gID
set the polyCrop of image id imID to gID
end action
"function globalRect theRect
return globalLoc(item 1 to 2 of theRect),globalLoc(item 3 to 4 of theRect)
end globalRect
"setProp polyCrop polyID
-- crop target image's alphadata to show only points within grc id polyID
put the filled of grc id polyID into fillState
set the filled of grc id polyID to true
put the rect of the target into r
put numToChar(255) into P ## opaque
put numToChar(0) into T ## transparent
repeat with y = 1+item 2 of r to item 4 of r ## SEE NOTE*
repeat with x = 1+item 1 of r to item 3 of r
put x,y into myPoint
if within(grc id polyID,myPoint) then put P after hold else put T after hold
end repeat
end repeat
set the filled of grc id polyID to fillState
set the alphaData of the target to hold
end polyCrop
"* NOTE: the "1+" is these statements is my effort to step through the exact number of pixels in the width and height of the image. The number of values in the series (item 1 of the rect of the image) to (item 3 of the rect of the image), inclusive, is 1+ the width of the image. (But I am not really sure whether to add 1 to the first value or subtract 1 from the last value)."
NOW, I, a well-known lazy slob, drew a polygone graphic with the built-in thingy-bob on the revTools palette:
- -
This, already, has all the area inwith the bounding rect but outwith the polygon as such transparent:
- -
So, obviously;
1. I am misunderstanding the question.
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Re: Shaping an image to fit in a polygon
Of course if one wants to use a polygon as a limiting frame of an underlying (i.e. on a lower layer) image that is quite
a different thing altogether which SHOULD be fairly simple.
- -
I set the blend of the polygon graphic to blendDstin:
-
a different thing altogether which SHOULD be fairly simple.
- -
I set the blend of the polygon graphic to blendDstin:
-
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Re: Shaping an image to fit in a polygon
If one's underlying image is the same size as ones polygon mask:
- -
things can look quite 'slinky'.
- -
things can look quite 'slinky'.

- Attachments
-
- Shaping an image.livecode.zip
- Here's the stack.
- (189.18 KiB) Downloaded 168 times
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Re: Shaping an image to fit in a polygon
If you then group the polygon with the underlying image
and set the blend of the group to blendSrc:
- -
and set the blend of the group to blendSrc:
- -
Re: Shaping an image to fit in a polygon
Isn't the easiest way of "Shaping an image to fit in a polygon" simply to set the backPattern of the graphic to the id of the image?
Then set with graphic's opaque to true.
Then set with graphic's opaque to true.
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Re: Shaping an image to fit in a polygon
It probably is . . . BUT [and this time I have a really plausible excuseIsn't the easiest way of "Shaping an image to fit in a polygon" simply to set the backPattern of the graphic to the id of the image?
Then set with graphic's opaque to true.

Having had 2 Astra-Zeneca Covid jabs, I am now sitting here with COVID, which is not "half as much fun" as having
COVID without vaccination, is still something that is not exactly "whoop-de-do fun", and it has driven my brain right
out from its usual place in the left field all the way across into the right field, so now reverting to my tendency of
over-complicating things as usual. The novelty of taking the 12 tablet cocktail of drugs prescribed by my doctor
really is quite good at distracting oneself from backGroundPattern and so on.
The 'problem' [here's another excuse coming right down the pipeline] is that this was intended to show how the original
OP on the Use-List could do something with an image slap-bang-dead-centre of a card.
Last edited by richmond62 on Mon Oct 18, 2021 3:14 pm, edited 1 time in total.
-
- VIP Livecode Opensource Backer
- Posts: 10045
- Joined: Sat Apr 08, 2006 7:05 am
- Contact:
Re: Shaping an image to fit in a polygon
The backgroundPattern works great - as long as you pay close attention to the details about image dimensions noted in the Dictionary.
It will usually work when you ignore those as well.
But I've found that there are times when you can throw a thousand images at it, and then stumble across one that will render distorted if it doesn't meet those constraints.
It will usually work when you ignore those as well.
But I've found that there are times when you can throw a thousand images at it, and then stumble across one that will render distorted if it doesn't meet those constraints.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
-
- Livecode Opensource Backer
- Posts: 10098
- Joined: Fri Feb 19, 2010 10:17 am
Re: Shaping an image to fit in a polygon
I am a great fan of backGroundPattern for those who have not tracked my obsession with it
re animations with sprites, but "all that dazzling code" from the OP threw me right off balance,
because, if that is frankly "all it is" most of this discussion has been a bad case of "chewing an old shoe again."
re animations with sprites, but "all that dazzling code" from the OP threw me right off balance,
because, if that is frankly "all it is" most of this discussion has been a bad case of "chewing an old shoe again."