HTML5 Canvas のイベント処理の概要

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

DOMはとても重要です。 DOM は Web フロントエンド分野の一部であり、HTML 要素を処理する場合だけでなく、グラフィックス プログラミングでも使用されます。たとえば、SVG 描画では、さまざまなグラフィックスが DOM ノードの形式でページに挿入されます。これは、グラフィックスを DOM メソッドを使用して操作できることを意味します。たとえば、b0df1a4bdae36d21726841c97f474466 要素がある場合、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

このコードは、canvas タグ内に四角形を描画します。グラフィックスを描画するためのectメソッドには戻り値がありません。開発者ツールでは、canvasタグ内にコンテンツが追加されていないこと、およびjsで取得されたcanvas要素と現在のコンテキストには、新しいグラフィックスを示すコンテンツが含まれていないこともわかります。 つまり、フロントエンドで一般的に使用されるメソッドは、キャンバスでは適用できません。たとえば、上の Canvas 内の四角形をクリックすると、実際には Canvas 要素全体をクリックすることになります。 Canvas 要素

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

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

コードをコピー

コードは次のとおりです:

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

次に、イベント オブジェクトが発生する場所を決定する必要があります。イベント オブジェクト e のlayerX 属性とlayerY 属性は、Canvas 内部座標系の座標を表します。ただし、この属性は Opera ではサポートされておらず、互換性のある記述を行うには、次のようにする予定です。

コードは次のとおりです:

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

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

コードをコピーします

コードは次のとおりです:

cvs.addEventListener('click', function(e){
 p = getEventPosition(e);
 if(ctx.isPointInPath(p.x, p.y)){
   //点击了矩形
 }
}, 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();
 });
}

上面的代码事先将两个矩形的基本参数保存下来，每次调用draw方法，就会循环调用这些基本参数，用于绘制两个矩形。这里还使用了clearRect方法，用于在重绘时清空画布。接下来要做的是增加事件代理，以及在重绘时对每一个上下文环境使用isPointInPath方法：

复制代码

代码如下:

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

事件发生时，将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动：

复制代码

代码如下:

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，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

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