Is a point inside a closed path - SVG Javascript

2020-03-07 07:30发布

问题:

How do you determine if a point is inside a closed SVG path with javascript? Why does the following code not work as expected?

var paper = Raphael(0, 0, 600, 600);

var p = paper.path("M82.725,37.884l0.777,1.555l-20.391,9.569l-17.714,7.453L27.508,68.212v3.111l-6.997,19.442l16.329,20.996 l7.864,21.019l0.477,13.026l5.658,10.284l4.666,3.886l-2.333,2.336l7.002,0.777v6.219l3.886,10.888l8.555,0.778l-8.555,4.363 l-10.11-2.03l1.016,24.043l2.873,11.73l0.777-2.333l4.667,16.329l3.111-0.778L56.047,350.44l-16.052,32.639l-8.381,19.527 l15.253,11.277l7.083,9.399l49.77,20.129l8.726,4.064l16.917,3.736l10.131,6.222l27.195,6.222l7.799,4.079l17.865,0.284 l16.354,5.292l72.321,17.903l60.463,45.627l18.082,16.633l-2.032-24.106l-34.777-76.215l-12.66-41.99l-1.447-22.556l-6.826-30.328 l-2.851-12.442l5.054-10.108l5.206-14.061l-0.214-10.045l1.555-14.779h7.774l7.002-3.111l-4.495-27.996l-2.593-27.93l4.753-28.06 l8.555-3.241l20.217-3.652l7.002-3.995l42.771-4.837l13.999,6.393h-3.111l0.777,4.666l3.889-1.558l1.555,3.891h-3.109l4.6,32.661 l3.176,27.219l3.111,0.775l18.662,2.271l12.443,0.062l15.078,6.224l12.139,38.105h-31.926l-1.512,6.997l-2.334,0.775l2.334,3.891 l6.998-6.222l-0.777,4.666l0.777,4.667l15.555-9.333l2.332,0.78l10.889,3.886l-2.336-6.221l3.414,18.664l-8.057,45.126l-4.213,55.97 l-10.584,59.88l7.582,31.108l1.035,24.106L477,579.916h31.105V36.33l-14.777,6.522L442.004,58.88l-24.107,9.636l-32.663,5.032 l-41.993-11.557v-2.333l-45.104-13.219l-9.268-6.761L250.7,25.982L145,20.084L103.72,31.058L82.725,37.884z");

p.isPointInside(165,100); // returns false, but when I draw a circle at that point, it is clearly inside the path.

回答1:

This isn't going to answer your problem, or even help much. A bit of googling came up with this issue, along with an observation - the bug seems to be affected by whether you're using floats or integers.

I've put your code in this fiddle, and it seems like they're right, though in your case, using the decimals makes it work, not break. Perhaps you could use this nugget of information to skirt around the issue somehow.

Credit goes to the creator of the issue on github.



回答2:

Check out this other issue, which might be the cause of your problem.

It has been resolved in version 2.1.1. You can get the updated code from this branch. Updating Raphael from it solved this problem for me.