Register forum user name Search FAQ

Gammon Forum

Notice: Any messages purporting to come from this site telling you that your password has expired, or that you need to verify your details, confirm your email, resolve issues, making threats, or asking for money, are spam. We do not email users with any such messages. If you have lost your password you can obtain a new one by using the password reset link.

Due to spam on this forum, all posts now need moderator approval.

 Entire forum ➜ MUSHclient ➜ Miniwindows ➜ Drawing an image clipped into a polygon

Drawing an image clipped into a polygon

It is now over 60 days since the last post. This thread is closed.     Refresh page


Posted by Twisol   USA  (2,257 posts)  Bio
Date Sat 28 Aug 2010 02:46 AM (UTC)

Amended on Sat 28 Aug 2010 06:47 AM (UTC) by Twisol

Message
I was bored, so I decided to figure out how to clip an image into a polygon. It took a few hours but I finally have a working method.

First, here's an example result, using Nick's miniwindow grid. Base image taken from Nick's WindowTransformImage topic, originally courtesy Isobel Gammon:

http://img801.imageshack.us/img801/8264/polygonclip.png

The image is drawn using WindowMergeImageAlpha, so the clipped area is transparent.

--[[ Setup ]]

-- make the visible window
local win = "win"
WindowCreate(win, 0, 0, 200, 250, 12, 0, ColourNameToRGB("saddlebrown"))

-- draw a grid
for i = 1, math.max(WindowInfo(win, 3), WindowInfo(win, 4)) / 25 do
  WindowLine(win, i * 25, 0, i * 25, WindowInfo(win, 4), 0xC0C0C0, 0, 1)
  WindowLine(win, 0, i * 25, WindowInfo(win, 3), i * 25, 0xC0C0C0, 0, 1)
end -- for



--[[ Load the image ]]

-- make the image-window
local image = "image"
WindowCreate(image, 0, 0, 0, 0, 0, 2, 0)
WindowLoadImage(image, "image", GetInfo (66) .. "may2010.png")
WindowResize(image,
  WindowImageInfo(image, "image", 2),
  WindowImageInfo(image, "image", 3),
  0)

-- initialize the alpha mask
WindowRectOp(image, 2, 0, 0, 0, 0, 0xFFFFFF) -- No transparency
WindowImageFromWindow(image, "alpha", image)



--[[ Clip into a polygon ]]

-- Draw a polygon around the selected area
WindowDrawImage(image, "image", 0, 0, 0, 0, 1, 0, 0, 0, 0)
WindowPolygon(image, "0,0,100,0,50,80,0,100", 0xFF0000, 0, 1, 0, 1, true, true)
WindowImageFromWindow(image, "image", image)

-- Create a mask in the shape of the clip space
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000) -- Full transparency
WindowPolygon(image, "0,0,100,0,50,80,0,100", 0xFFFFFF, 0, 1, 0xFFFFFF, 0, true, true) -- Draw "out" the transparency where the image should be visible.
WindowImageFromWindow(image, "clip", image)

-- Apply the clipping operation
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000)
WindowMergeImageAlpha(image, "alpha", "clip", 0, 0, 0, 0, 0, 1, 0, 0, 0, 0)
WindowImageFromWindow(image, "alpha", image)



--[[ Draw to the visible window ]]

-- Get the target image
WindowImageFromWindow(image, "target", win)

-- Apply the blend
WindowDrawImage(image, "target", 0, 0, 0, 0, 1, 50, 50, 0, 0)
WindowMergeImageAlpha(image, "image", "alpha", 0, 0, 0, 0, 0, 1, 0, 0, 0, 0)

-- Return to the target image
WindowImageFromWindow(win, "image", image)
WindowDrawImage(win, "image", 50, 50, 0, 0, 1, 0, 0, 0, 0)

-- Reset the image window
WindowDrawImage(image, "image", 0, 0, 0, 0, 1, 0, 0, 0, 0)



--[[ Show the changes ]]

WindowShow(win, true)


[EDIT] Removed extraneous WindowResize().

'Soludra' on Achaea

Blog: http://jonathan.com/
GitHub: http://github.com/Twisol
Top

Posted by Nick Gammon   Australia  (23,133 posts)  Bio   Forum Administrator
Date Reply #1 on Sat 28 Aug 2010 03:41 AM (UTC)

Amended on Sat 28 Aug 2010 03:59 AM (UTC) by Nick Gammon

Message
A copy of his image:


- Nick Gammon

www.gammon.com.au, www.mushclient.com
Top

Posted by Nick Gammon   Australia  (23,133 posts)  Bio   Forum Administrator
Date Reply #2 on Sat 28 Aug 2010 03:55 AM (UTC)

Amended on Sat 28 Aug 2010 03:58 AM (UTC) by Nick Gammon

Message
Yes, very interesting. And if you change the line that draws the polygon to fill with gray, you get a partial mask.


-- Create a mask in the shape of the clip space
WindowRectOp(image, miniwin.rect_fill, 0, 0, 0, 0, 0x000000) -- Full transparency
WindowPolygon(image, "0,0,100,0,50,80,0,100", 0xFFFFFF, miniwin.pen_solid, 1, 0x777777, miniwin.brush_solid, true, true) 
WindowImageFromWindow(image, "clip", image)


Change to the paint colour in bold (from 0xFFFFFF).


- Nick Gammon

www.gammon.com.au, www.mushclient.com
Top

Posted by Twisol   USA  (2,257 posts)  Bio
Date Reply #3 on Sat 28 Aug 2010 04:05 AM (UTC)

Amended on Sat 28 Aug 2010 04:10 AM (UTC) by Twisol

Message
Yep! And you can use a preexisting alpha mask, too. The example starts fully blended, but if you had a PNG and you used its alpha mask instead, this trick would still work, because we're masking out only the part of the mask that needs to be clipped. Masking a mask with a mask is interesting. XD

[EDIT] This technique lets you do everything WindowImageOp does and more. I think that's the most interesting point to take from this.

'Soludra' on Achaea

Blog: http://jonathan.com/
GitHub: http://github.com/Twisol
Top

Posted by Twisol   USA  (2,257 posts)  Bio
Date Reply #4 on Sat 28 Aug 2010 04:20 AM (UTC)

Amended on Sat 28 Aug 2010 04:24 AM (UTC) by Twisol

Message
It should be noted that clipping and fading can be composed separately, too:

-- Create a mask in the shape of the clip space
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000) -- Full transparency
WindowPolygon(image, "0,0,100,0,50,80,0,100", 0, 5, 0, 0xFFFFFF, 0, true, true) -- Draw "out" the transparency where the image should be visible.
WindowImageFromWindow(image, "mask", image)

-- Apply the clipping operation
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000)
WindowMergeImageAlpha(image, "alpha", "mask", 0, 0, 0, 0, 0, 1, 0, 0, 0, 0)
WindowImageFromWindow(image, "alpha", image)

-- Create a mask to fade the image
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000)
WindowPolygon(image, "0,0,100,0,50,80,0,100", 0, 5, 0, 0x777777, 0, true, true)
WindowImageFromWindow(image, "mask", image)

-- Apply the fade mask
WindowRectOp(image, 2, 0, 0, 0, 0, 0x000000)
WindowMergeImageAlpha(image, "alpha", "mask", 0, 0, 0, 0, 0, 1, 0, 0, 0, 0)
WindowImageFromWindow(image, "alpha", image)


(I've changed the image from "clip" to "mask", since it's not just for clipping anymore. Also, I removed the drawing of the border, and disabled the pen in the WindowPolygon calls. This can always be done separately of course.)

This feature lets you compose multiple operations separately, which can be easier to understand and implement.

'Soludra' on Achaea

Blog: http://jonathan.com/
GitHub: http://github.com/Twisol
Top

The dates and times for posts above are shown in Universal Co-ordinated Time (UTC).

To show them in your local time you can join the forum, and then set the 'time correction' field in your profile to the number of hours difference between your location and UTC time.


12,239 views.

It is now over 60 days since the last post. This thread is closed.     Refresh page

Go to topic:           Search the forum


[Go to top] top

Information and images on this site are licensed under the Creative Commons Attribution 3.0 Australia License unless stated otherwise.