Filling a non-rect shape

Games
#1

My client threw me a curveball last week. On one screen where I was using a rectangular color bar, the length of which corresponds to a data point in the app, they changed the background graphic from a simple rect to this:

http://mikesellsoftware.com/wp-content/uploads/06iDash3Bowtie.png

I can’t use polylines because they can’t be filled. My first attempt will be to just draw vertical lines, increasing in width as I go left or right of center.

Is this brute force method the best available?
[import]uid: 58455 topic_id: 25724 reply_id: 325724[/import]

#2

Horace Bury had written a nice POLYGON FILL algorithm… You should look up that in code exchange
EDIT : here it is
http://developer.anscamobile.com/code/polygon-fill-and-point-polygon-detection [import]uid: 64174 topic_id: 25724 reply_id: 103997[/import]

#3

this relies on drawing pixel by pixel which is likely to be very slow, I’m guessing? Any experience with this?

Tsk! About time Corona provided filled polygons, MS Windows has provided these since Windows 1.0 (1985)!
[import]uid: 84768 topic_id: 25724 reply_id: 104002[/import]

#4

From Horace’s own words

For fun I added the ability to fill the polygon using newRect (an optimisation because the original code filled each pixel individually.) I also made the size of the pixels/rows adjustable and modified it to fill the exterior (area surrounding the polygon) rather than the interior as an option.
[import]uid: 64174 topic_id: 25724 reply_id: 104003[/import]

#5

Yeah, I don’t need general purpose and my hardcoded, brute force line drawing seems to be doing the trick. Thanks, anyway. [import]uid: 58455 topic_id: 25724 reply_id: 104004[/import]

#6

@Satheesh Incidentally, how do you look up stuff in the code exchange. Seems to be just an unsorted list. I’d never have found Horace’s code without your link. [import]uid: 84768 topic_id: 25724 reply_id: 104006[/import]

#7

@jfb

Google, what else! I hate the search provided by Ansca. It throws up nothing. I remembered Horace’s name, because he shares lots of codes in Code exchange :slight_smile:
@davemikesell whatever suits you! [import]uid: 64174 topic_id: 25724 reply_id: 104013[/import]

#8

I think I know what your asking but might be wrong. Anyway, why not create a new rectangle and set its fill color and place this Faster Slower png over the top of it in the group. You can then change the width of the rectangle thats underneath this image as it goes faster or slower. Set its reference point to rightcenter and change to leftcenter when goes above zero.

Hope that helps :slight_smile:

[import]uid: 99431 topic_id: 25724 reply_id: 104084[/import]

#9

Mingeeta - That won’t work because the background to the bow tie image is transparent. So my color rect would bleed outside of the border. [import]uid: 58455 topic_id: 25724 reply_id: 104096[/import]

#10

Use a bitmap mask shaped the same as your bow tie, with the bow tie white and the rest black. Add this mask to a transparent png.
So you will have a newRect whose width can be controlled. On top of that add your transparent png which has been masked to the shape of the bow tie, and on top of that add the bow tie image from above

This should work to stop the bleeding hopefully [import]uid: 99431 topic_id: 25724 reply_id: 104097[/import]

#11

Thanks for the fast replies!

Another piece of information I should have given you - underneath everything is a gradient background. Wouldn’t the bit mask hide that as well?

Here’s what it looks like now with my brute force method.

http://mikesellsoftware.com/wp-content/uploads/ScreenShot.png [import]uid: 58455 topic_id: 25724 reply_id: 104102[/import]

#12

No the mask only hides part of the image you are attaching the mask to.
As the image is totally transparent everything underneath will still be as is.

Edit: Hmm on second thoughts I dont think my solution above would work.

[import]uid: 99431 topic_id: 25724 reply_id: 104104[/import]