Leinwand Bilder und Klicken Sie auf Ereignis

Ich habe derzeit zwei Kreise in einer <canvas> tag mit HTML5 & JavaScript.

Nun versuche ich ein Bild hinzufügen (done), dass Veränderungen basierend auf mouse-over und Klick.

Es ist im Grunde eine Implementierung eines play /pause-Taste mit einer zusätzlichen Farbe zu ändern, wenn der Benutzer die mouse-overs auf die Taste.

Ich kann nicht scheinen, um herauszufinden, wie Ereignisse funktionieren auf Formen, die in HTML5, da Sie keine Objekte ... Hier ist mein code im moment :

window.onload = function() {

      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;


      //Outer circle
      context.beginPath();  
      context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
      context.fillStyle = "#000";
      context.fill();
      context.stroke();

      //Inner cicle
      context.beginPath();
      context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
      context.fillStyle = "#fff";
      context.fill();
      context.stroke();

      //Play /Pause button
      var imagePlay = new Image();
      var imageHeight = 48/2;
      imagePlay.onload = function() {
        context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
      };
      imagePlay.src = "images/play.gif";

}

1) Wie behandeln Sie Ereignisse, die auf Formen erstellt mit <canvas> ?

2) How to clean-up /entfernen Bilder auf der <canvas> beim ersetzen es mit einem anderen ?

Vielen Dank im Voraus !

InformationsquelleAutor m_vdbeek | 2012-06-23
  1. 2

    Gibt es technisch keine Möglichkeit sich zu registrieren Maus-events auf Leinwand-gezeichneten Formen. Jedoch, wenn Sie verwenden eine Bibliothek, wie Raphael (http://raphaeljs.com/), kann es verfolgen Sie die Form Positionen und so herausfinden, welche Form erhält das Maus-Ereignis. hier ist ein Beispiel:

    var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

    Wie Sie sehen, es ist sehr einfach auf diese Weise. Zum ändern von Formen, die diese Bibliothek wird auch in handliches kommen. Ohne Sie würden Sie brauchen, daran zu erinnern, wie neu, alles jedes mal, wenn Sie eine änderung vornehmen

    • Oh, ok, danke ! Muss ich eine Bibliothek ? Ich bin umschreiben eine app, so dass es weniger JavaScript-Dateien und andere Verbesserungen machen es leichter. So bin ich ein wenig zurückhaltend mit einer anderen Bibliothek ... aber wenn ich ... noch einmal vielen Dank für deine schnelle Antwort !
    • Ich würde vorschlagen, eine Bibliothek, aber ich habe getan, ohne das man vorher. Sie benötigen, um zu verfolgen alle Ihre Formen und Ihre Lage, dann benutzen Mathematik, um herauszufinden, ob eine Koordinate fällt in es.
    InformationsquelleAutor matt3141
  2. 1

    Gut Die einfache Antwort ist, können Sie nicht. Sie wird entweder finden müssen, um die Koordinaten für das click-Ereignis und berechnen, ob Sie durchführen wollen, um eine option oder einen nicht oder können Sie Bereich und zuordnen von tags und die overlay-canvas-element mit ihm. Zum ändern einer Leinwand verwenden Sie die clearRect Funktion zu zeichnen, malen Sie ein Rechteck über alles, und dann neu zeichnen, was Sie wollen.

    InformationsquelleAutor qw3n
  3. 1

    1. Es gibt keine "built-in" Weg, um verfolgen zu Formen, gezeichnet auf die Leinwand. Sie sind nicht als Objekte behandelt, sondern nur Pixel in einem Bereich. Wenn Sie möchten, um Ereignisse zu behandeln, die auf Formen gezogen, die auf der Leinwand, müssen Sie zu verfolgen die Fläche jeder Form umfasst, und dann bestimmen, welche Form Sie auslösen des Ereignisses für die auf der Grundlage der position der Maus.

    2. Können Sie ziehen Sie einfach über andere Formen, wenn Sie wollen, ersetzen Sie es mit etwas. Möchten Sie vielleicht einen Blick auf globalCompositeOperation.

    Wenn Sie möchten, behandeln Sie Ihre Zeichnungen als Objekte, ich würde empfehlen, mit SVG statt der Leinwand.

    Andere Möglichkeit ist die Verwendung Tasten, und dann style diese mit CSS.

    Im Grunde, was Sie tun-und jetzt war wirklich nicht der vorgesehene Zweck oder die Verwendung des canvas-Bereichs. Es ist wie mit einem Stift-hammer-Nägel - Sie verwenden das falsche Werkzeug für den job.

    • Danke für deine Antwort, auch ! Ich eigentlich als SVG, weil der anti-aliasing-Probleme <canvas> aber es scheint zu sein, weniger kompatibel dann <canvas> in älteren Browsern und es scheint zu sein, viel langsamer. Weiß nicht, aber ich könnte falsch sein aber.
    • Canvas ist eines der neuen Elemente eingeführt, die als Teil von HTML5. SVG ist ein früher standard, der kam vor der Leinwand, so ich glaube, es sollte tatsächlich mehr kompatibel mit älteren Browsern. Der wichtigste Vorteil von SVG für Sie ist, dass Sie können anfügen von Ereignishandlern, die zu den Objekten. Diese [link] hat einen kurzen Vergleich, dass Sie vielleicht nützlich finden.
    • Sorry, vergaß den link in meinem letzten Kommentar. Hier. 🙂
    InformationsquelleAutor Zhihao
  4. 0

    Zwar ist es wahr, dass Sie können nicht erstellen, klicken Sie auf Ereignisse, die für gezeichnete Objekte auf der Leinwand gibt es einen workaround: Wickeln Sie die Leinwand in einem DIV-tag und fügen Sie dann die Bilder innerhalb des DIV-tag über dem CANVAS-tag. 

    <div id="wrapper">
    <img src="img1.jpg" id="img1"></img>
    <canvas id="thecanvas"></canvas>
</div>

    Dann CSS verwenden, um die Bilder position:absolute und Links:*px und oben:*px Attribute, um das Bild über die Leinwand, wo Sie hätte normalerweise gezeichnet.

    #img1{
position:absolute;
left: 10px;
top: 10px;
 }

    Können Sie fügen Sie dann klicken Sie auf Ereignisse, um das Bild platziert ist, der über die Leinwand den Eindruck, dass Sie klicken auf die Leinwand(das folgende Beispiel verwendet die jQuery click () - Funktion)

    $( "#img1" ).click(function(){
    alert("Thanks for clicking me");
});
    InformationsquelleAutor Eric
  5. 0

    Können Sie werfen ein Strahl in die Leinwand und manuell testen Sie Ihre Bilder zum Schnittpunkt mit dem Strahl. Sie sollten schauen, wie Sie es drücken, und senden einen Strahl in den Bildschirm. Schreiben Sie eine 

    objectsUnderPoint( x, y );

    Funktion gibt ein array zurück, der alle Bilder, die sich mit den ray-x, y.

    Dies ist die einzige wirklich richtige Antwort, und dies ist, wie es ist in der Regel in 3D-engines auch.

    InformationsquelleAutor David
Schreibe einen Kommentar