canvas 给图形添加点击事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas 给图形添加点击事件</title>
    <style>
      #canvas {
        background-color: #f9f9f9;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas">浏览器不支持 canvas </canvas>
  </body>
  <script>
    // 在HTML5 Canvas中，我们不能直接给形状（如圆形、矩形、文字等）添加事件监听器。但我们可以通过检测鼠标点击的坐标是否位于该形状内部来模拟形状的点击事件

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height = 500;
    canvas.width = 500;

    // ===================================== 给三角形添加点击事件 ===================================================================
    // 绘制三角形
    var points = [
      { x: 300, y: 100 },
      { x: 200, y: 200 },
      { x: 400, y: 200 },
    ];
    function drawTria(points) {
      ctx.fillStyle = "yellow";
      ctx.strokeStyle = "pink";
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      ctx.lineTo(points[1].x, points[1].y);
      ctx.lineTo(points[2].x, points[2].y);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    }

    // 给三角形添加点击事件
    function bindHandleClickTria(points, cb) {
      canvas.addEventListener("mousedown", function (e) {
        var rect = canvas.getBoundingClientRect();
        var point = {
          x: event.clientX - rect.left,
          y: event.clientY - rect.top,
        };

        if (isPointInTriangle(point, points[0], points[1], points[2])) {
          cb(point);
        }
      });
    }
    // 检查点是否在三角形内
    function isPointInTriangle(point, p0, p1, p2) {
      var s =
        p0.y * p2.x -
        p0.x * p2.y +
        (p2.y - p0.y) * point.x +
        (p0.x - p2.x) * point.y;
      var t =
        p0.x * p1.y -
        p0.y * p1.x +
        (p0.y - p1.y) * point.x +
        (p1.x - p0.x) * point.y;

      if (s < 0 != t < 0) {
        return false;
      }

      var A =
        -p1.y * p2.x +
        p0.y * (p2.x - p1.x) +
        p0.x * (p1.y - p2.y) +
        p1.x * p2.y;
      if (A < 0) {
        s = -s;
        t = -t;
        A = -A;
      }
      return s > 0 && t > 0 && s + t < A;
    }
    drawTria(points);
    bindHandleClickTria(points, (point) => {
      console.log(point);
    });

    // ===================================== 给圆形添加点击事件 ===================================================================
    // 绘制圆形
    function drawCircle(
      x,
      y,
      radius,
      startAngle = 0,
      endAngle = Math.PI * 2,
      anticlockwise = false
    ) {
      ctx.fillStyle = "green";
      ctx.strokeStyle = "red";
      ctx.beginPath();
      ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
      ctx.fill();
      ctx.stroke();
    }
    // 给圆形添加点击事件
    function bindHandleClickCircle(x, y, radius, cb) {
      canvas.addEventListener("mousedown", function (e) {
        var clickX = e.offsetX;
        var clickY = e.offsetY;
        if (
          Math.sqrt(Math.pow(clickX - x, 2) + Math.pow(clickY - y, 2)) <= radius
        ) {
          cb(clickX, clickY);
        }
      });
    }

    drawCircle(100, 200, 50);
    bindHandleClickCircle(100, 200, 50, (x, y) => {
      console.log(x, y);
    });

    // ===================================== 给矩形添加点击事件 ===================================================================
    // 绘制矩形
    function drawRect(x, y, width, height) {
      ctx.fillStyle = "red";
      ctx.strokeStyle = "green";

      ctx.fillRect(x, y, width, height);
      ctx.strokeRect(x, y, width, height);
    }
    // 给矩形添加点击事件
    function bindHandleClickReact(x, y, width, height, cb) {
      canvas.addEventListener("mousedown", function (e) {
        var mouseX = e.pageX - canvas.offsetLeft;
        var mouseY = e.pageY - canvas.offsetTop;
        if (
          mouseX > x &&
          mouseX < x + width &&
          mouseY > y &&
          mouseY < y + height
        ) {
          cb(mouseX, mouseY);
        }
      });
    }

    drawRect(50, 50, 100, 50);
    bindHandleClickReact(50, 50, 100, 50, (x, y) => {
      console.log(x, y);
    });
  </script>
</html>
canvas 给图形添加点击事件

canvas 给图形添加点击事件

相关阅读更多精彩内容

友情链接更多精彩内容
