HTML5 Leinwand Maus

Question

Etwas wie ich habe:

    function mouseClick(event) {
        ...
    }
    canvas.addEventListener("mousedown", mouseClick, false);
    function drawRect(x, y) {
        context.fillRect(x, y, 16, 16);
    };
    drawRect(10, 10);

Wie kann man etwas machen, wie wenn ich auf mein Rechteck in der Canvas klicke, etwas bekommen? Etwas wie: Wenn ich auf das Rechteck klicke, dann eine Benachrichtigung erhalten;

Entschuldigung für meine englische Sprache.

Answer 1

Ein Canvas ist nichts weiter als eine Bitmap. Es wird kein Protokoll geführt, dass ein Rechteck auf dem Canvas gezeichnet wurde, daher müssen Sie, wenn Sie erkennen möchten, dass der Klick innerhalb eines Bereichs stattgefunden hat, auf dem Sie ein Rechteck gezeichnet haben, eine Aufzeichnung der von Ihnen gezeichneten Bereiche führen und diese überprüfen. z.B.:

var rects= [];

function mouseClick(event) {
    // Ermitteln Sie die Position des Klicks relativ zum Canvas. Dies ist nicht zuverlässig! Erfordert
    // Standardsmodus und dass das Canvas nicht in anderen OffsetParents verschachtelt ist.
    // Das zuverlässige Ermitteln seitenbezogener Koordinaten in allen Fällen liegt außerhalb des
    // Rahmens dieser Frage...
    //
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

    // Jedes Rechteck in der Liste der gezeichneten Rechtecke auf Kollision überprüfen
    //
    for (var i= rects.length; i-->0;) {
        var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];
        if (x0<=x && x

`

Wenn Sie häufig solche Dinge tun, ist es wahrscheinlich ratsam, ein auf Retained-Mode-Zeichnungssystemen wie SVG anstatt auf reinen Bitmap-Canvas basierendes System zu verwenden. In SVG können Sie auf Klickereignisse direkt auf einem Rechteckobjekt hören, das Rechteck verschieben, neu anordnen usw.

`

Answer 2

$(canvas).mousedown(function myDown(e) 
{
  var position = $(canvas).position();
  var x = e.pageX-position.left;
  var y = e.pageY-position.top;
  ...
});

Dies ist eine viel bessere Möglichkeit, dies zu tun!

Answer 3

Ich denke, was du sagst, ist, dass du möchtest, dass Ereignisse eintreten, wenn du auf Objekte klickst, die du auf einer Leinwand gezeichnet hast. Ich habe ein paar Tutorials darüber geschrieben, wie man dauerhafte Formen erstellt und sie mit Mausklicks bewegt. Das sollte dir einen guten Ausgangspunkt dafür geben.

Answer 4

Sie könnten auch Concrete.js ausprobieren http://www.concretejs.com, das ein leichtgewichtiges Canvas-Framework ist, das Interaktivität hinzufügt. Sie würden einfach etwas wie dieses tun:

var key = canvas.getIntersection(x,y);

Wenn x,y eine Grafik schneidet, die Sie mit einem bestimmten Schlüssel gezeichnet haben, gibt es den Schlüssel zurück, und Sie wissen, worauf Sie gescrollt/geklickt haben.

Dies ist eine viel bessere Lösung, weil sie auf alles funktioniert, was Sie zeichnen, einschließlich Kreise, Linien, Kurven, Polygone, beliebige Blobs usw.

Answer 5

addEventListener ist knifflig. Was ich versuchen würde ist

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

oder eine anonyme Funktion verwenden.

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

Mit der apply-Funktion kann sichergestellt werden, dass der eventListener auf das richtige Element angewendet wird. Mehr dazu findest du hier.