0

I am trying to determine if a point is inside a path. I tryed Raphael JS, but as you can see in the Codepen bellow, it says that the point is not inside the path. I read that to determine if a point is in path, usually the nonzero or evenodd is use, but that does not check every area inside the path. I want a method to check every for every area that is covered by the path. The answer could be canvas, or SVG, as long as it works in all browsers it is fine for me.

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

var p = paper.path("M222,218 L190,174 L203,152 L303,178 L259,216 L187,289 L161,304 L155,237 L215,197 L332,199 L325,164 L239,173 L192,233 L272,294 L351,265 L324,198 L269,199 L200,247 L212,292 L322,309 L366,266 L337,229 L260,249 L192,321 L169,324 L129,249 L131,201 L242,267 L308,294 L356,270 L364,230 L363,216 L222,218 Z");
p.attr('class','cursor');
var arr = [180,250];
var circle = paper.circle(arr[0], arr[1], 1);
console.log(p.isPointInside(arr[0],arr[1])); // returns false, but when I draw a circle at that point, it is clearly inside the path.

https://codepen.io/dragostoma/pen/GQEwWo

Dragos-Stefan Toma
  • 36
  • 3
  • 1
    The standard 2D API provieds a method to do what you want `isPointInPath` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath and you can create the path from the same path string you use in the example you have. – Blindman67 Feb 13 '18 at 10:19
  • I tryed on codepend, and it worked for point 180,250, but, for 270,205, or 270,195 did not work, I tryed here https://codepen.io/dragostoma/pen/BYZbew It looks like it is using nonzero method, and if you make an svg or canvas with fill rule set to nozero and you fill it, you will see exaclty why it misses this 2 points. – Dragos-Stefan Toma Feb 13 '18 at 11:03
  • So ypu want both evenodd and nonzero? Canvas2d isPointInPath has a 4th argument fillrule. So you could try to call it twice, enumerating the two different values. – Kaiido Feb 13 '18 at 11:53
  • Even if I combine them, they still miss some spots. – Dragos-Stefan Toma Feb 13 '18 at 13:58
  • 1
    Possible duplicate of https://stackoverflow.com/questions/2659206/detecting-wether-a-point-is-inside-or-outside-of-a-raphael-js-shape ? – Ian Feb 13 '18 at 15:50

0 Answers0