地点がパスの中にあるかを調べるには？
解説
クリックした場所がある図形の中であれば、何か処理を行うということはよくあります。
そのようなときには、ある地点が直前のパスの中にあるかを調べるisPointInPath()メソッドが使えます。
isPointInPath()は、X座標とY座標を引数に持ち、その地点が直前のパスの中にあればtrueを、そうでなければfalseを返します。
パスが閉じていない場合は、閉じたパスとして評価されます。
ちなみに、パスの上の地点はパスの中と評価されます。
次はisPointInPathの利用例です。パスの中にある地点は赤く、それ以外は青く表示します。
context.beginPath();
context.moveTo(10,20);
context.lineTo(150,60);
context.lineTo(180,120);
context.closePath();
context.stroke();
var x1 = 20; var y1 = 10;
var x2 = 100; var y2 = 50;
var x3 = 180; var y3 = 90;
var r1 = context.isPointInPath(x1,y1);
var r2 = context.isPointInPath(x2,y2);
var r3 = context.isPointInPath(x3,y3);
context.strokeStyle = r1 ? "red" : "blue";
context.strokeRect(x1,y1,2,2);
context.strokeStyle = r2 ? "red" : "blue";
context.strokeRect(x2,y2,2,2);
context.strokeStyle = r3 ? "red" : "blue";
context.strokeRect(x3,y3,2,2);
関連項目
Canvasとは
