CODEWITHSUNDEEP
javascripthtmlcanvas
LIXer
LIXer

Reputation: 362

An old quesition, how to determine a point in a irregular shape?

i'm learning Html5 Canvas for some weeks, but the problem above baffle me a long time.

An irregular shape, possible is a circle, Rect, ellipse, polygon , or a path which constructed by some lines and bezier curve...

I found some algorithm for some shape, like circle, rect, and polygon,but , if i used them in canvas, it will be so complex for those many many shape.

I also view some canvas libary,such as Kinetic.js, paper.js, fabric.js,etc, they all do this work well, but the code of they is so much and blend here to there, so I can't get main point...

but i found,all of them don't use the 'isPointInPath' method to do this work. why? if use this, I can do this work too!

kinetic.js , i knew him use the getImageData to determine, but strange, the imagedata its got is no alpha(alpha is always 255), but the shape its drew is semitransparent, oh no my brain is out of thought.

so i'm here want to know how determine a point is in a irregular shape(possibly it's semitransparent) in canvas, even a think way can help me.

and , is some preblem with the 'isPointInPath' method? thus no one use it?

Upvotes: 0

Views: 688

Answers (1)

user1693593
user1693593

Reputation:

I see no reason why you can't use the built-in functions:

var isInPath = context.isPointInPath(x, y)

For strokes you can use - strokes are separate as a path can be an open line or you can have stroke widths that expands outside the actual polygon:

var isInStroke = context.isPointInStroke(x, y)

Note that this will only work for the last path (after using beginPath()). If you need to iterate several paths (ie. shapes) you need to re-construct the paths (no need to stroke or fill though). This is perhaps a reason why some don't use it.

Transparency is not an issue as checking paths involves the vectors, not the rendered output of those (color information is not part of the check).

In the future you will be able to use the Path object directly. Currently this is not implemented in any browser which otherwise would make iterating a breeze; so re-constructing last path is the only way for now. As you don't actually have to draw anything when checking, the performance is acceptable unless there are a zillion objects to iterate.

Upvotes: 1

Related Questions