サイト内検索

isPointInPath() メソッド

構文

context . isPointInPath(x, y)

指定の地点が現在のパスの中にあるなら true を返します。

仕様

isPointInPath(x, y) メソッドは、このメソッドに引き渡された座標 (x, y) の地点が、現在の変形によって影響を受けない canvas の座標空間の中の座標として扱われるとき、非ゼロ巻数規則によって決定されるように、現在のパスの中にあれば、true を返さなければいけません。そうでなければ false を返さなければいけません。パス上の地点は、そのパスの中であると見なされます。引数のいずれかが無限大や NaN なら、このメソッドは false を返します。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-ispointinpath

サンプル

isPointInPath() メソッドは、分かりやすく言えば、引数に与えた座標が、現在サブパスにセットされている図形の中に入っているか、それともその図形の外にあるのかを評価します。

isPointInPathメソッドのサンプル

このサンプルでは、まず 座標 (20, 30) を左上端とした、横幅 60 ピクセル、縦幅 40 ピクセルの矩形を描きます。そして、座標 (50, 50) と 座標 (10, 10) が、その矩形の中にあるのか外にあるのかを isPointInPath() メソッドを使って評価します。上の図は、矩形と評価対象となる座標を示したものです。緑色の点は座標 (50, 50) を、赤色の点は 座標 (10, 10) を表しています。

/* 矩形を描く */
ctx.rect(20, 30, 60, 40);
/* 画面描画 */
ctx.fill();
/* 座標 (50, 50) は true になる */
alert( "(50, 50) : " + ctx.isPointInPath(50, 50) );
/* 座標 (10, 10) は false になる */
alert( "(10, 10) : " + ctx.isPointInPath(10, 10) );

[isPointInPath() メソッドの実際のサンプル]

このサンプルでは、パスで描いた図形が矩形のため、座標の位置がパスの中なのか外なのかは一目瞭然ですが、円弧や二次曲線やベジェ曲線で描かれたパスに対して評価したい場合には、このメソッドが役に立ちます。

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 × 1 ○ 9.2 × 9 ○ 0002 ×
3 ○ 3 ○ 2 ○ 9.5 ○   3 ×
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○