Drawing path, translating and testing points inside
Lets get an SVG path displayed and another translated, then we can add it to our canvas.
We can hit test by amending our point to match the translation
We can hit test by amending our point to match the translation
var s = Snap("#svgout"), c, x, y, myTranslateX = 200, myTranslateY = 100;
var myPathString = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z";
var p = s.path( myPathString );
var p2 = s.path( myPathString ).transform("t" + myTranslateX + "," + myTranslateY);
for( var count = 0; count < 500; count++ ) {
x = Math.random() * 800; y = Math.random() * 400;
c = s.circle( x,y,5 ).attr({ fill: "silver" });
// basic path
if( Snap.path.isPointInside( myPathString, x,y ) ) {
c.attr({ fill: "#ff0000" });
}
// matching against path as though it was translated
if( Snap.path.isPointInside( myPathString, x - myTranslateX, y - myTranslateY ) ) {
c.attr({ fill: "#0000ff" });
}
}