HTML5 Canvasのイベントハンドリングについて

この記事では主にHTML5 Canvasのイベント処理、Canvas要素へのイベントのバインド、isPointInPathメソッド、ループ再描画、イベントバブリングについて解説しています

DOMはとても重要です。 DOM は Web フロントエンド分野の一部であり、HTML 要素を処理する場合だけでなく、グラフィックス プログラミングでも使用されます。たとえば、SVG 描画では、さまざまなグラフィックスが DOM ノードの形式でページに挿入されます。これは、グラフィックスを DOM メソッドを使用して操作できることを意味します。たとえば、 要素がある場合、jquery を直接使用してクリック イベント $('#p1').click(function(){…})" を追加できます。この DOM 処理方法は HTML5 には適していません。Canvas では、別のメカニズムが使用されます。Canvas 上にどれだけ多くのグラフィックスが描画されても、実際には Canvas 自体が Canvas の一部であるため、それ自体が Canvas の一部になることはありません。グラフィックスは JavaScript イベントを追加します

Canvas では、描画されたグラフィック要素はすべてフレーム上に描画されます。例:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect);     //undefined

このコードは、グラフィックを描画するための rect メソッドに戻り値がないことがわかります。ブラウザの開発者ツールでは、canvas タグの内部も確認できます。コンテンツは追加されておらず、js で取得された Canvas 要素と現在のコンテキストには、新しいグラフィックスを示すコンテンツがありません。上をクリックするなど、フロントエンドの操作はキャンバスでは適用されません。Canvas の四角形は実際には Canvas 要素全体をクリックします

イベントは Canvas 要素レベルにのみ到達できるため、さらに詳しく知りたい場合は、処理のためにどのグラフィックを追加する必要があるかを特定します。イベントが発生したときに、イベント オブジェクトの位置を確認します。たとえば、上の例では、マウスが存在する限り、x 軸で 10 ～ 110、y 軸で 10 ～ 110 の範囲をカバーする四角形を渡します。この範囲内でクリックされた場合、それは四角形をクリックしたものとみなされ、その四角形によって処理される必要があるクリック イベントを手動でトリガーできます。このアイデアは実際には比較的単純ですが、実装はまだ少し複雑です。この判断プロセスの効率を考慮する必要がありますが、いくつかの場所でイベントの種類も再判断する必要があり、キャンバス内のキャプチャとバブリングのメカニズムを再定義する必要があります

最初のステップはこれを行うことです。イベントを Canvas 要素にバインドするには、たとえば、クリック イベントを Canvas 内のグラフィックにバインドする場合は、Canvas 要素を通じてイベントをプロキシする必要があります。

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

次に、イベントオブジェクトが発生し、イベントオブジェクトのlayerXとlayerX e LayerY属性はCanvasの内部座標系の座標を表します。ただし、Operaはこの属性をサポートしておらず、Safariはこれを削除する予定であるため、互換性のあるいくつかの書き込みメソッドが必要です。 made:

function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}

//注意: 上記の関数を使用するには、Canvas 要素の位置を絶対値に設定する必要があります。

イベント オブジェクトの座標位置がわかったので、キャンバス内のどのグラフィックスがこの座標をカバーするかを決定する必要があります。

isPointInPath メソッド

Canvas の isPointInPath メソッドは、次のように、現在のコンテキスト グラフィックが特定の座標をカバーしているかどうかを判断できます。

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50);     //true
ctx.isPointInPath(5, 5);     //false

次に、四角形上でクリック イベントが発生するかどうかを判断するイベント判定を追加します。

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  if(ctx.isPointInPath(p.x, p.y)){
    //点击了矩形
  }
}, false);

上記は Canvas イベントを処理するための基本的なメソッドですが、上記のコードには制限があります。isPointInPath メソッドは現在のコンテキスト内のパスのみを決定するため、Canvas 内に複数のグラフィックが描画されている場合、最後のグラフィックのみを使用できます。

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20);     //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150);     //true
ctx.isPointInPath(20, 20);     //false

などのイベントを決定するコンテキスト 上記のコードからわかるように、isPointInPath メソッドは現在のコンテキスト内のグラフィックス パスのみを識別でき、以前に描画されたパスを遡って判断することはできません。この問題の解決策は、クリック イベントが発生したときに、すべてのグラフィックスを再描画し、描画されたグラフィックスごとに isPointInPath メソッドを使用して、イベントの座標がグラフィックスの範囲内にあるかどうかを判断することです。

ループ再描画とイベントバブリング

ループ再描画を実現するには、事前にグラフィックスの基本パラメータを保存する必要があります:

arr = [
  {x:10, y:10, width:100, height:100},
  {x:110, y:110, width:100, height:100}
];
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
draw();
function draw(){
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
  });
}

上記のコードは、2 つの長方形の基本パラメータを事前に保存します。描画メソッドが呼び出されるたびに、これらの基本パラメータが循環的に呼び出され、2 つの四角形が描画されます。ここでは、再描画時にキャンバスをクリアするために、clearRect メソッドも使用されています。次に行うことは、イベント プロキシを追加し、再描画時にコンテキストごとに isPointInPath メソッドを使用することです。

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  draw(p);
}, false);

イベントが発生したら、イベント オブジェクトの座標を処理のために描画メソッドに渡します。ここで描画メソッドにいくつかの小さな変更を加える必要があります:

function draw(p){
  var who = [];
  ctx.clearRech(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v, i){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
    if(p && ctx.isPointInPath(p.x, p.y)){
      //如果传入了事件坐标，就用isPointInPath判断一下
      //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
      who.push(i);
    }
  });
  //根据数组中的index值，可以到arr数组中找到相应的元素。
  return who;
}

在上面代码中，点击事件发生时draw方法会执行一次重绘，并在重绘过程中检查每一个图形是否覆盖了事件坐标，如果判断为真，则视为点击了该图形，并将该图形的index值放入数组，最后将数组作为draw方法的返回值。在这种处理机制下，如果Canvas里有N个图形，它们有一部分是重叠的，而点击事件恰巧发生在这个重叠区域上，那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况，数组的最后一个成员处于Canvas最上层，而第一个成员则在最下层，我们可以视为最上层的成员是e.target，而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法，如果真要模拟DOM处理，还要给图形设置父子级关系。

以上就是Canvas事件处理的基本方法。在实际运用时，如何缓存图形参数，如何进行循环重绘，以及如何处理事件冒泡，都还需要根据实际情况花一些心思去处理。另外，click是一个比较好处理的事件，相对麻烦的是mouseover、mouseout和mousemove这些事件，由于鼠标一旦进入Canvas元素，始终发生的都是mousemove事件，所以如果要给某个图形单独设置mouseover或mouseout，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 canvas学习的实例介绍

angularJS结合canvas画图的实现

以上がHTML5 Canvasのイベントハンドリングについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。