Comment attacher des gestionnaires d'événements aux éléments du canevas et détecter les clics sur les formes ?

Attachement de gestionnaires d'événements aux éléments du canevas

Lorsque vous dessinez sur un élément du canevas, les formes rendues manquent de représentation inhérente au-delà de leurs pixels. Cela signifie que les événements de clic ne peuvent pas être attachés directement à des formes individuelles.

Solution :

Pour ajouter un gestionnaire de clic à un élément de canevas :

canvas.addEventListener('click', function() { /* Event handler code */ }, false);

Pour déterminer sur quel élément du canevas vous avez cliqué :

var canvas = document.getElementById('myCanvas');

// Get canvas offset and context
var canvasLeft = canvas.offsetLeft + canvas.clientLeft;
var canvasTop = canvas.offsetTop + canvas.clientTop;
var context = canvas.getContext('2d');

// Array to store element data
var elements = [];

// Add 'click' event listener to canvas
canvas.addEventListener('click', function(event) {
  // Calculate click coordinates relative to canvas
  var x = event.pageX - canvasLeft;
  var y = event.pageY - canvasTop;

  // Check for collision detection against elements
  elements.forEach(function(element) {
    if (y > element.top && y < element.top + element.height
      && x > element.left && x < element.left + element.width) {
      alert('Clicked an element');
      // TODO: Additional actions (e.g., remove element, update canvas)
    }
  });

}, false);

Échec Tentatives :

• elem.onClick = alert("hello world"); : attribue la valeur de retour de alert() à la propriété onClick, affichant immédiatement l'alerte .
• elem.onClick = "alert('bonjour tout le monde !')"; : Attribue une chaîne à la propriété onClick, ce qui n'entraîne aucune gestion des événements.
• elem.onClick = function() { ... } : utilise la méthode archaïque de gestion des événements, c'est-à-dire le cas -sensible (onclick vs. onClick).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!