Einführung in die Ereignisbehandlung von HTML5 Canvas

DOM ist ein sehr wichtiger Teil des Web-Frontend-Bereichs und wird nicht nur bei der Verarbeitung von HTML-Elementen, sondern auch in der grafischen Programmierung 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 Element vorhanden ist, können Sie jquery direkt verwenden, um ein Klickereignis $('#p1').click(function(){…})" hinzuzufügen. Diese DOM-Verarbeitungsmethode ist jedoch in nicht mehr anwendbar HTML5 Canvas. Canvas verwendet einen weiteren Satz von Mechanismen. Unabhängig davon, wie viele Grafiken auf der Leinwand gezeichnet werden, sind die Grafiken selbst Teil der Leinwand und können daher nicht direkt abgerufen werden JavaScript-Ereignisse zu einer bestimmten Grafik hinzufügen

Canvas-Einschränkungen

In Canvas werden die gezeichneten Grafikelemente nicht als Rückgabewert ausgegeben js kann die gezeichneten Grafikelemente nicht abrufen:

Der Code lautet wie folgt:

cvs = document.getElementById('mycanvas'); .getContext('2d');

　theRect = ctx.rect(10, 10, 100, 100);

　ctx.stroke();

console.log (theRect); //undefiniert

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. Sie können auch sehen, dass innerhalb des Canvas-Tags kein Inhalt hinzugefügt wird, aber in js Das Canvas-Element und der aktuelle Kontext haben keinen Inhalt, der auf die neue Grafik hinweist. Daher sind die im Frontend üblicherweise verwendeten Dom-Methoden nicht anwendbar Klicken Sie beispielsweise auf das Rechteck im Canvas oben, der eigentliche Klick ist das gesamte Canvas-Element

Binden von Ereignissen an das Canvas-Element

Da das Ereignis nur das Canvas-Element erreichen kann Wenn Sie weiter gehen möchten, ermitteln Sie, welche internen Grafiken zur Verarbeitung hinzugefügt werden müssen. Binden Sie ein Ereignis an das Canvas-Element und überprüfen Sie die Position das Ereignisobjekt und prüfen Sie dann, welche Grafiken die Position abdecken. Im obigen Beispiel wird ein Rechteck gezeichnet, das den Bereich von 10-110 auf der x-Achse und 10-110 auf der y-Achse abdeckt. Solange die Maus in diesem Bereich klickt, kann dies als Klicken auf das Rechteck angesehen werden, und die vom Rechteck zu verarbeitenden Klicks können tatsächlich relativ einfach ausgelöst werden 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, und der Erfassungs- und Bubbling-Mechanismus innerhalb von Canvas muss neu definiert werden.

Als Erstes müssen Sie Ereignisse an das Canvas-Element binden. Wenn Sie beispielsweise ein Klickereignis an eine Grafik innerhalb des Canvas binden möchten, müssen Sie das Ereignis über das Canvas-Element weiterleiten:

Der Code lautet wie folgt:

　cvs = document.getElementById('mycanvas');

　cvs.addEventListener('click', function(e){

　//...

　}, false);

Als nächstes müssen Sie den Ort bestimmen, an dem das Ereignisobjekt auftritt. Die Attribute „layerX“ und „layerY“ des Ereignisobjekts e repräsentieren Koordinaten im internen Canvas-Koordinatensystem. Allerdings unterstützt Opera dieses Attribut nicht und Safari plant, es zu entfernen, daher müssen wir es auf kompatible Weise schreiben:

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: Zur Verwendung Mit der obigen Funktion müssen Sie die Position des Canvas-Elements auf „absolut“ festlegen.

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 ermitteln, ob die aktuelle Kontextgrafik eine bestimmte Koordinate abdeckt, zum Beispiel:

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

Als nächstes fügen Sie eine Ereignisbeurteilung hinzu, um zu bestimmen, ob ein Klickereignis auf dem Rechteck auftritt:

Der Code lautet wie folgt:

cvs.addEventListener('click', function(e) {

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//Auf das Rechteck geklickt

}

　}, false);

Das Obige ist die grundlegende Methode zur Behandlung von Canvas-Ereignissen, der obige Code weist jedoch immer noch Einschränkungen auf, da die isPointInPath-Methode nur den Pfad im aktuellen Kontext bestimmt Es wurden mehrere Objekte im Canvas gezeichnet. Beim Zeichnen von Grafiken kann das Ereignis nur anhand des Kontexts der letzten Grafik beurteilt werden, zum Beispiel:

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 isPointInPath-Methode nur den Grafikpfad im aktuellen Kontext identifizieren und der zuvor gezeichnete Pfad kann nicht zurückgeschätzt werden. 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.

Schleifenneuzeichnung und Event-Bubbling

Um die Schleifenneuzeichnung zu implementieren, müssen die Grundparameter der Grafiken im Voraus gespeichert werden:

Der Code lautet wie folgt:

　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( );

　});

　}

Der obige Code speichert die Grundparameter der beiden Rechtecke im Voraus wird in einer Schleife aufgerufen. Wird zum Zeichnen von zwei Rechtecken verwendet. Die Methode „clearRect“ wird hier auch verwendet, um die Leinwand beim Neuzeichnen zu leeren. Als nächstes müssen Sie Ereignisdelegierte hinzufügen und beim Neuzeichnen die Methode isPointInPath für jeden Kontext verwenden:

Der Code lautet wie folgt:

cvs.addEventListener('click', function(e ){

p = getEventPosition(e);

draw(p);

}, false);

Wenn das Ereignis eintritt, wird das Ereignis Objekt Die Koordinaten werden zur Verarbeitung an die Zeichenmethode übergeben. Hier müssen wir auch einige kleine Änderungen an der Zeichenmethode vornehmen:

Der Code lautet wie folgt:

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)) {

// Wenn die Ereigniskoordinaten übergeben werden, verwenden Sie isPointInPath, um sie zu bestimmen

// Wenn die aktuelle Umgebung die Koordinaten abdeckt, geben Sie den Indexwert des ein aktuelle Umgebung in das Array

　who.push(i);

　}

　});

　//Entsprechend dem Indexwert im Array , Sie finden das entsprechende im arr-Array-Element.

return who;

}

Wenn im obigen Code das Klickereignis auftritt, führt die Zeichenmethode eine Neuzeichnung durch und prüft, ob jede Grafik die Ereigniskoordinaten hat Wenn das Urteil wahr ist, gilt die Grafik als angeklickt, der Indexwert der Grafik wird in das Array eingefügt und schließlich wird das Array als Rückgabewert der Zeichenmethode verwendet. Wenn bei diesem Verarbeitungsmechanismus N Grafiken im Canvas vorhanden sind, sich ein Teil davon überlappt und das Klickereignis zufällig in diesem überlappenden Bereich auftritt, enthält das Rückgabearray der Zeichenmethode N Mitglieder. Zu diesem Zeitpunkt ist es ein bisschen ähnlich wie bei der Ereignissprudelung. Das letzte Mitglied des Arrays befindet sich oben im Canvas und das erste Mitglied unten. Wir können uns das oberste Mitglied als e.target vorstellen , während die anderen Mitglieder e.target sind. Der Knoten, an den während des Blasenprozesses übergeben wird. Dies ist natürlich nur die einfachste Verarbeitungsmethode. Wenn Sie die DOM-Verarbeitung wirklich simulieren möchten, müssen Sie eine Eltern-Kind-Beziehung für die Grafiken festlegen.

Das Obige ist die grundlegende Methode zur Verarbeitung von Canvas-Ereignissen. In der tatsächlichen Anwendung muss entsprechend der tatsächlichen Situation geklärt werden, wie Grafikparameter zwischengespeichert werden, wie eine Schleifenneuzeichnung durchgeführt wird und wie mit Ereignisblasen umgegangen wird. Darüber hinaus ist Click ein relativ einfach zu handhabendes Ereignis. Die relativ problematischen Ereignisse sind mouSEOver, Mouseout und Mousemove, da das Mousemove-Ereignis immer auftritt, wenn Sie Mouseover oder Mouseout separat festlegen möchten Für eine bestimmte Grafik müssen Sie außerdem den Weg der Mausbewegung aufzeichnen und den Ein- und Ausstiegsstatus für die Grafik festlegen. Da die Verarbeitungsschritte komplexer werden, muss den Leistungsaspekten mehr Aufmerksamkeit geschenkt werden.

Das Obige ist die Einführung in die Ereignisverarbeitung von HTML5 Canvas. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!