HTML5 canvas hittesting

Ich habe einige Bilder auf einem HTML5-Canvas gezeichnet und möchte überprüfen, ob sie per Mausklick getroffen werden. Scheint einfach, ich habe die Grenzen der Bilder, aber die Bilder werden transformiert (übersetzt und skaliert). Leider hat der Kontext keine Methode, um die aktuelle Transformationsmatrix zu erhalten, und es gibt auch keine API für die Matrizenmultiplikation. Scheint die einzige Lösung ist, die Transformationen selbst zu verfolgen und Matrixmultiplikation zu implementieren. Vorschläge sind willkommen.HTML5 canvas hittesting

Quelle

2010-06-30 Valentin Iliescu

Nach mehr Nachdenken habe ich erkannt, dass selbst wenn der Kontext eine Methode hätte, um die aktuelle Transformationsmatrix zu erhalten, wäre es nicht sinnvoll, da ich die Bildtransformationsmatrix beim Mausklick brauche und der Kontext zu diesem Zeitpunkt einen anderen hat verwandeln. Was ich wahrscheinlich brauche, ist ein Szenengraph, entweder einen einfachen implementieren oder eine Bibliothek wie Cake JS verwenden. –

Sie brauchen keine Matrizen zum Übersetzen und Skalieren. Um beispielsweise eine Maus-X-Koordinate zu übersetzen und zu skalieren, verwenden Sie newPointX = event.x * scaleX + translateX –

Danke, Sie haben Recht, in diesem Fall muss ich keine Matrixmultiplikation implementieren. –

Dies ist ein häufiges Problem in der 3D (OpenGL) Grafikwelt.

Die Lösung besteht darin, ein Hilfs-Canvas-Objekt (das nicht angezeigt wird) zu erstellen und das Bild neu zu zeichnen. Die Zeichnung ist genau dieselbe wie bei Ihrer Haupt-Leinwandzeichnung, außer dass jedes Element mit einer eindeutigen Farbe gezeichnet wird. Sie suchen dann das Pixel auf, das Ihrer Mausauswahl entspricht, und lesen die Farbe ab, die Ihnen das entsprechende Element (falls vorhanden) liefert.

Dies ist eine häufig verwendete Methode in der OpenGL-Welt. Sie können Beschreibungen von Google-Begriffen wie "opengl object picking" finden. Hier ist one of the many search results.

Aktualisierung: Die HTML5-Canvas-Spezifikation enthält jetzt hit regions. Ich bin nicht sicher, bis zu welchem Grad diese von Browsern unterstützt werden.

Quelle

2010-06-30 17:43:38 brainjam

Coole Idee! Gut gesagt –

Genius. Ich würde 10x erhöhen, wenn ich könnte! –

Das Problem hier ist, dass die Leinwände alle nicht optionale Farbmischung und Anti-Aliasing haben. Zwischen Farben, wenn die Objekte aneinander stoßen. Diese Zwischenfarben können nahe genug an andere Farb-IDs, die Sie gespeichert haben, fallen, sodass ein Grenzbereich als Treffer für ein anderes Objekt falsch dargestellt werden kann. Ich bin mir nicht sicher, wie ich das am besten hinkriege. Durch die Verwendung einer separaten Arbeitsfläche pro erkennbaren Objekt wird zu viel Arbeitsspeicher verschwendet. Jedes Objekt getrennt darzustellen, während sich die Maus bewegt und überprüft wird, scheint zu viel Leistung zu verschwenden. –

HTML5 canvas hittesting

Antwort

Verwandte Themen