HTML5-Canvas - Bild Hinzufügen auf die Maus klicken Sie auf die Maus-Koordinaten
Okay Jungs, ich habe versucht, diese zu bekommen für die Stunden jetzt, ich kann nicht alles finden.
Kann jemand geben Sie eine schnelle Skript, oder zeigen Sie mich in die Richtung, in der eine Anleitung dafür..
Ich möchte ein Bild (imgObj) kommen auf die Leinwand, wenn der Benutzer klickt auf die Leinwand. Ich möchte das Bild zu kommen, bei den Koordinaten, dass die Maus, wenn der Benutzer klickt.
Irgendwelche Ideen?
Vielen Dank!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnte man hier starten: http://www.html5canvastutorials.com/
Dies ist ein tutorial über das HTML5-Canvas.
KineticJS ist eine Bibliothek, die macht das wirklich ganz einfach: http://www.kineticjs.com/
im wesentlichen mit KineticJS können Sie die folgenden Methoden verwenden, um Ihr Ziel zu erreichen:
Wirklich sorry für die späte Antwort. Ich weiß, diese Frage ist älter als Gott, aber es ist nicht eine akzeptierte Antwort noch, so dass ich dachte, ich würde meine zwei Cent für die Menschen, die nicht wollen, um die Verwendung von externen Bibliotheken.
Schrieb ich ein minimalistisches Skript für Sie, das tun, was Sie möchten - ändern Sie einfach
fillRect()
zudrawImage()
entsprechend.Hier ein JSFiddle ein Beispiel: http://jsfiddle.net/96s20d7m/
Ich werde die
x
undy
Werte um, wo Sie geklickt haben, auf der Leinwand, und dann die Zeichnung etwas mitfillRect()
.Beachten Sie, dass dies nicht immer so funktioniert wie erwartet, weil
pageX
undpageY
ändern, basierend auf Grenzen, Polsterung, Ränder, etc. Sie können dies in der Fiddle. Um diese Arbeit zu machen, ändern Sie einfachpageX/Y
zuoffsetX/Y
, oder verwenden Sie ein polyfill.So etwas in der
mHandler
- Funktion funktioniert ein bisschen besser:Oder wenn Sie wollen, um es abzukürzen bis:
Dann können Sie einfach anrufen
context.drawImage(imgObj, mouse.x, mouse.y, imgObj.width, imgObj.height);
Wenn Sie möchten, dass das Bild in der Mitte der Maus klicken, rufen Sie einfach
Wie diese: http://jsfiddle.net/96s20d7m/4/
Wieder, ersetzen Sie das Rechteck für das Bild.
Ich hoffe, das half jemand dies liest Jahre später!