To handle mouse events on canvas, you need to manually monitor and judge the trigger area in combination with coordinates. 1. When obtaining the mouse position, you need to convert clientX and clientY to the internal coordinates of canvas. The formula is x = e.clientX - rect.left, y = e.clientY - rect.top; 2. If there is a zoom or transform style, the coordinates need to be adjusted accordingly; 3. To determine whether to click on a graphic, you need to pre-record the graphic information and detect whether the coordinates fall in the corresponding area when clicking; 4. To realize the hover effect, you can listen to mousemove and clear and redraw canvas or use double buffering technology; 5. Note that the mobile terminal needs to use touch events to replace hover, and the performance optimization and scaling adaptation issues must be considered.

Handling mouse events on canvas is not complicated, but several key points need to be understood. Canvas itself is just a bitmap canvas, which does not have the ability to interact like DOM elements. Therefore, to make canvas respond to mouse clicks, hovering and other behaviors, you need to manually monitor the event and judge the trigger area based on the coordinates.

Get the mouse position on canvas

clientX and clientY in the mouse event object provided by the browser are the coordinates relative to the viewport, and what you need to judge is the specific position inside canvas, so a conversion is required.

 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(`Mouse click location: x=${x}, y=${y}`);
});

A few points to note:

• If canvas has a scale or transform style, such as scale() in CSS, the coordinates need to be adjusted accordingly.
• Touch events on mobile terminals need to be processed separately and can be simulated by touchstart and other events.

Determine whether the mouse clicks a graphic

Since canvas does not have the built-in "click on a certain graphic" function, you need to record the information of the drawn content (such as position and shape) by yourself, and then judge whether it falls in the area based on the mouse coordinates.

Take rectangles as an example:

 const rectData = { x: 50, y: 50, width: 100, height: 100 };

canvas.addEventListener('mousedown', (e) => {
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  if (
    mouseX >= rectData.x &&
    mouseX <= rectData.x rectData.width &&
    mouseY >= rectData.y &&
    mouseY <= rectData.y rectData.height
  ) {
    console.log(&#39;Clicked on the rectangle&#39;);
  }
});

If you have drawn multiple graphics, it is recommended to maintain a graphics list, and each graphics saves its boundary information or path, so that you can traverse and judge each time you click.

Realize hover effects or real-time feedback

The key to implementing hover is to listen to mousemove events and continuously detect whether the current mouse position is in the target area.

you can:

• Clear canvas and repaint each time you move (suitable for simple scenes)
• Or use double buffering technology to draw the state change part on off-screen canvas (suitable for complex scenarios)

The example logic is as follows:

 canvas.addEventListener('mousemove', (e) => {
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // Clear the previous draw ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Re-draw all graphics drawAllShapes();

  // If the mouse is on the graph, add highlight if (isMouseOverShape(x, y)) {
    drawHighlight();
  }
});

Although this method is not as efficient as DOM, it is sufficient when there are not many graphics.

Tips and precautions

• Keep the graphic data structure clear : Don’t just rely on images to judge interactions, you should use data to record graphic information.
• Performance optimization : If there are many graphics and frequent redrawing will affect performance, you can consider local updates or use offscreen canvas.
• Compatibility issue : There is no hover on the mobile side, so touch-related events should be replaced.
• Zoom adaptation : If the page uses a high-definition solution (such as rem, dpr), remember to process the size of the canvas as well.

Basically that's it. Although canvas does not naturally support interaction like HTML elements, as long as you master coordinate mapping and graphical judgment methods, you can flexibly implement various mouse response functions.

The above is the detailed content of How to handle mouse events on a canvas?. For more information, please follow other related articles on the PHP Chinese website!