Jump to content

Draw line around objects


Recommended Posts

I can think of a few ways to accomplish this --


Assume the drawn shape is defined by points P[1], P[2], P[3], etc., all connected by a series of lines.  Then you can:


1) Use the non-zero winding rule.



2) Use the even-odd rule.



3) Create a temporary canvas, use the points to draw and fill a shape, then check the mapping between the stars in the temporary canvas to see what colors the resulting pixels are.


To capture the points:


  • Have a state variable that can be IDLE, DRAWING, or CLOSED.
  • On the first mouse down, go from IDLE to DRAWING. Record the first point.
  • Every update while DRAWING, record a new point on the drawing area if the new point is more than d distance from the last point.  You would need to experiment to get a good number for d.  If d is too small then you risk running out of memory for the points.  Memory for the points could be dynamically allocated or pre-allocated in a constant-size array.
  • On mouse up, go from DRAWING to CLOSED.
  • On CLOSED, calculate what stars are in and out of the drawn polygon.  Change to IDLE.

On every frame draw, draw the lines defined by the point array.  Grab the Context from the Canvas Phaser is drawing on and use moveTo(), lineTo(), and stroke() to draw the unfinished polygon.


Once you can the basic mechanics implemented, then you can move on to optimization and polish.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...