Einführung in die Ereignisbehandlung von HTML5 Canvas

In diesem Artikel wird hauptsächlich die Ereignisverarbeitung von HTML5 Canvas vorgestellt. In diesem Artikel werden die Einschränkungen von Canvas, das Binden von Ereignissen an Canvas-Elemente, die isPointInPath-Methode, das Neuzeichnen von Schleifen und das Bubbling von Ereignissen usw. erläutert. Freunde in Not können sich darauf beziehen

DOM ist ein sehr wichtiger Teil des Web-Frontend-Bereichs und wird nicht nur bei der Verarbeitung von HTML-Elementen, sondern auch in der Grafikprogrammierung verwendet. Beispielsweise werden beim SVG-Zeichnen verschiedene Grafiken in Form von DOM-Knoten in die Seite eingefügt, was bedeutet, dass Grafiken mithilfe von DOM-Methoden manipuliert werden können. Wenn beispielsweise ein b0df1a4bdae36d21726841c97f474466-Element vorhanden ist, können Sie direkt mit jquery ein Klickereignis $('#p1').click(function(){…})" hinzufügen. Diese DOM-Verarbeitungsmethode ist für HTML5 nicht mehr anwendbar. Canvas verwendet einen anderen Satz von Mechanismen, egal wie viele Grafiken auf Canvas gezeichnet werden. Die Grafiken selbst sind tatsächlich Teil von Canvas Separat erhältlich, daher kann es nicht direkt an jemanden weitergegeben werden.

Einschränkungen von Canvas

In Canvas werden alle Grafiken auf dem Rahmen gezeichnet Die Zeichenmethode behandelt die gezeichneten Grafikelemente nicht als Selbst wenn der Rückgabewert ausgegeben wird, kann js die gezeichneten Grafikelemente nicht abrufen. Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Dieser Code zeichnet ein Rechteck im Canvas-Tag. Zunächst können Sie sehen, dass die rect-Methode zum Zeichnen von Grafiken keinen Rückgabewert hat Mit den Tools des Browsers können Sie auch sehen, dass innerhalb des Canvas-Tags kein Inhalt hinzugefügt wird und in js das Canvas-Element und der aktuelle Kontext keinen Inhalt haben, der auf die neue Grafik hinweist.

Daher ist der Dom Im Frontend häufig verwendete Methoden sind im Canvas nicht anwendbar, z. B. das Klicken auf das Rechteck im Canvas oben. Der eigentliche Klick ist das gesamte Canvas-Element.

Da das Ereignis nur die Ebene des Canvas-Elements erreichen kann, müssen Sie Code für die Verarbeitung hinzufügen, um zu ermitteln, auf welche Grafik innerhalb des Canvas geklickt wurde ist: Binden Sie ein Ereignis an das Canvas-Element. Überprüfen Sie beim Eintreten des Ereignisses die Position des Ereignisobjekts und prüfen Sie dann, welche Grafiken die Position abdecken. Im obigen Beispiel wird beispielsweise ein Rechteck gezeichnet, das den Bereich abdeckt 10-110 auf der x-Achse und 10-110 auf der y-Achse. Solange die Maus in diesem Bereich geklickt wird, kann dies als Klicken auf das Rechteck angesehen werden, und es kann manuell darauf geklickt werden Eigentlich ist die Verarbeitung durch das Trigger-Rechteck relativ einfach, aber die Implementierung ist immer noch etwas kompliziert. Es muss nicht nur die Effizienz dieses Beurteilungsprozesses berücksichtigt werden, sondern auch der Ereignistyp muss an einigen Stellen neu beurteilt werden Die Erfassungs- und Risikoeinstellungen innerhalb des Canvas müssen neu definiert werden.

Das erste, was Sie tun müssen, ist, ein Ereignis an das Canvas-Element zu binden Innerhalb des Canvas müssen Sie das Ereignis über das Canvas-Element vertreten:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Als nächstes müssen Sie bestimmen, wo das Ereignisobjekt auftritt. Die Attribute „layerX“ und „layerY“ des Ereignisobjekts repräsentieren das Innere der Canvas-Koordinaten in einem Koordinatensystem. Allerdings unterstützt Opera dieses Attribut nicht und Safari plant, es zu entfernen, daher müssen wir einige kompatible Schreibmethoden erstellen:

Kopieren Sie den Code

Der Code lautet wie folgt:

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};
}

//Hinweis: Um die obige Funktion verwenden zu können, müssen Sie die Position des Canvas-Elements auf absolut setzen.

Da wir nun die Koordinatenposition des Ereignisobjekts haben, müssen wir bestimmen, welche Grafiken im Canvas diese Koordinate abdecken.

isPointInPath-Methode

Die isPointInPath-Methode von Canvas kann bestimmen, ob die aktuelle Kontextgrafik eine bestimmte Koordinate abdeckt, wie zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

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

Fügen Sie als Nächstes eine Ereignisbeurteilung hinzu, um zu bestimmen, ob ein Klickereignis auf dem Rechteck auftritt:

Code kopieren

Der Code lautet wie folgt:

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

Das Obige ist die grundlegende Methode zur Behandlung von Canvas-Ereignissen, aber der obige Code Aufgrund der isPointInPath-Methode gibt es Einschränkungen. Es wird nur der Pfad im aktuellen Kontext beurteilt. Wenn also mehrere Grafiken im Canvas gezeichnet wurden, kann das Ereignis nur anhand des Kontexts der letzten Grafiken beurteilt werden, z. B.:

Code kopieren

Der Code lautet wie folgt:

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

Wie Sie dem obigen Code entnehmen können, kann die Methode isPointInPath nur Identifizieren Sie den Grafikpfad im aktuellen Kontext und den zuvor gezeichneten Pfad. Eine nachträgliche Beurteilung ist nicht möglich. Die Lösung für dieses Problem lautet: Wenn ein Klickereignis auftritt, zeichnen Sie alle Grafiken neu und verwenden Sie für jede Zeichnung die Methode isPointInPath, um zu bestimmen, ob die Ereigniskoordinaten innerhalb der Abdeckung der Grafiken liegen.

Loop-Neuzeichnen und Event-Bubbling

Um das Schleifen-Neuzeichnen zu implementieren, müssen die Grundparameter der Grafiken im Voraus gespeichert werden:

复制代码

代码如下:

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

Das obige ist der detaillierte Inhalt vonEinführung in die Ereignisbehandlung von HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!