Um Mausereignisse auf Leinwand zu behandeln, müssen Sie den Triggerbereich in Kombination mit Koordinaten manuell überwachen und beurteilen. 1. Wenn Sie die Mausposition erhalten, müssen Sie Clientx und Clienty in die internen Koordinaten der Leinwand umwandeln. Die Formel ist x = e.clientx - rect.left, y = e.clienty - rect.top; 2. Wenn es einen Zoom- oder Transformationsstil gibt, müssen die Koordinaten entsprechend angepasst werden. 3. Um festzustellen, ob Sie auf eine Grafik klicken m?chten, müssen Sie die Grafikinformationen vorschreiben und feststellen, ob die Koordinaten beim Klicken in den entsprechenden Bereich fallen. 4. Um den Schwebeeffekt zu verwirklichen, k?nnen Sie Mousemove und klare und neu zeichnen oder doppelte Puffertechnologie einsetzen. 5. Beachten Sie, dass das mobile Terminal Touch -Ereignisse verwenden muss, um die Schwebepl?tze zu ersetzen, und die Probleme der Leistungsoptimierung und Skalierung von Anpassung müssen berücksichtigt werden.

Die Behandlung von Mausereignissen auf Leinwand ist nicht kompliziert, aber mehrere wichtige Punkte müssen verstanden werden. Leinwand selbst ist nur eine Bitmap -Leinwand, die nicht wie Dom -Elemente interagiert. Damit Leinwand auf Mausklicks, Schwebungen und andere Verhaltensweisen reagieren, müssen Sie daher das Ereignis manuell überwachen und den Ausl?serbereich anhand der Koordinaten beurteilen.

Holen Sie sich die Mausposition auf Leinwand

clientX und clientY im vom Browser bereitgestellten Mausereignisobjekt sind die Koordinaten in Bezug auf das Ansichtsfenster, und was Sie ben?tigen, ist die spezifische Position innerhalb der Leinwand, sodass eine Konvertierung erforderlich ist.

 const canvas = document.getElementById ('mycanvas');
const rect = canvas.getBoundingClientRect ();

canvas.addeventListener ('MouseDown', (e) => {
  const x = e.clientx - rect.left;
  const y = e.clienty - rect.top;
  console.log (`Maus klicken Sie auf Ort: x = $ {x}, y = $ {y}`);
});

Ein paar Punkte zu beachten:

• Wenn Canvas in CSS einen Skala- oder Transformationsstil wie scale() aufweist, müssen die Koordinaten entsprechend angepasst werden.
• Berührungsereignisse an mobilen Terminals müssen separat verarbeitet werden und k?nnen durch touchstart und andere Ereignisse simuliert werden.

Bestimmen Sie, ob die Maus auf eine Grafik klickt

Da Canvas nicht über die integrierte Funktion "Klicken Sie auf eine bestimmte grafische" Funktion, müssen Sie die Informationen des gezogenen Inhalts (wie Position und Form) selbst aufzeichnen und dann beurteilen, ob sie basierend auf den Mauskoordinaten in den Bereich f?llt.

Nehmen Sie Rechtecke als Beispiel:

 const rectdata = {x: 50, y: 50, Breite: 100, H?he: 100};

canvas.addeventListener ('MouseDown', (e) => {
  const mousex = e.clientx - rect.left;
  const mausy = e.clienty - rect.top;

  Wenn (
    mousex> = rectdata.x &&
    MOusex <= rectdata.x rectdata.width &&
    MOUSEY> = rectdata.y &&
    mausy <= rectdata.y rectdata.height
  ) {
    console.log (&#39;auf das Rechteck geklickt&#39;);
  }
});

Wenn Sie mehrere Grafiken gezeichnet haben, wird empfohlen, eine Grafikliste zu verwalten, und jede Grafik speichert ihre Grenzinformationen oder Pfad, damit Sie jedes Mal, wenn Sie klicken, durchqueren und beurteilen k?nnen.

Schwebeffekte oder Echtzeit-Feedback erkennen

Der Schlüssel zur Implementierung von HOVER liegt darin, mousemove -Ereignisse anzuh?ren und kontinuierlich festzustellen, ob sich die aktuelle Mausposition im Zielbereich befindet.

du kannst:

• L?schen und jedes Mal, wenn Sie sich bewegen (geeignet für einfache Szenen), l?schen und neu streichen)
• Oder verwenden Sie die Doppelpuffertechnologie, um den staatlichen ?nderungsteil auf Off-Screen-Leinwand zu zeichnen (geeignet für komplexe Szenarien)

Die Beispiellogik lautet wie folgt:

 canvas.addeventListener ('Mousemove', (e) => {
  const x = e.clientx - rect.left;
  const y = e.clienty - rect.top;

  // Die vorherige Zeichnung ctx.clearrect (0, 0, canvas.width, canvas.height);

  // Alle Grafiken DrawallShapes () neu drehen;

  // Wenn sich die Maus im Diagramm befindet, fügen Sie Highlight hinzu, wenn (ismouseoverShape (x, y)) {
    Drawhighlight ();
  }
});

Obwohl diese Methode nicht so effizient wie DOM ist, reicht sie aus, wenn nicht viele Grafiken vorhanden sind.

Tipps und Vorsichtsma?nahmen

• Halten Sie die Grafikdatenstruktur klar : Verlassen Sie sich nicht nur auf Bilder, um Interaktionen zu beurteilen, sondern sollten Daten verwenden, um grafische Informationen aufzuzeichnen.
• Leistungsoptimierung : Wenn viele Grafiken vorhanden sind und h?ufige Neubeschwerden die Leistung beeinflussen, k?nnen Sie lokale Updates in Betracht ziehen oder Offscreen -Leinwand verwenden.
• Kompatibilit?tsproblem : Auf der mobilen Seite befindet sich kein Schwebel, daher sollten berührungsbezogene Ereignisse ersetzt werden.
• Zoom-Anpassung : Wenn die Seite eine hochaufl?sende L?sung (z. B. REM, DPR) verwendet, denken Sie daran, auch die Gr??e der Leinwand zu verarbeiten.

Grunds?tzlich ist das. Obwohl Canvas die Interaktion wie HTML -Elemente natürlich nicht unterstützt, k?nnen Sie, solange Sie die Koordinaten -Mapping- und grafische Beurteilungsmethoden beherrschen, verschiedene Maus -Antwortfunktionen flexibel implementieren.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Mausereignissen auf einer Leinwand um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!