Question

我想DIY一个画布动画库，在我添加各种形状后，我需要为它们添加事件进行交互。

注意我知道API isPointInPath（），虽然它可以在浏览器中运行良好但我想在没有isPointInPath
的WeiXin App中执行

这是我的所有形状

圆
RECT
多边形

如果我点击圆圈和矩形，很容易检测到。

圈，说（x'，y'）是圆的中心坐标，（x，y）是我的鼠标坐标如果(x - x')^2+(y - y')^2 <=r^2，我们可以认为我们点击了圈子。
对于 rect ，说（x'，y'）是rect的坐标，w和h是它的宽度和高度，（x，y）是我的鼠标（x，y））是我的鼠标坐标，如果0<(x - x')<w&&0<(y - y')<h，我们可以认为我们点击了矩形。

如果我按照rect的检测算法检测多边形，那就太难了，而且效率太低。

如果有人能告诉我如何解决这个问题？

我的多边形核心代码

   getPoints: function () {
            var points = [],
                angle = this.startAngle || 0;
            for (var i = 0; i < this.sides; ++i) {
                points.push(new Point(this.x + this.radius * Math.sin(angle), this.y - this.radius * Math.cos(angle)));
                angle += 2 * Math.PI / this.sides;
            }
            return points;
        },
  createPath: function (context) {
       
        var points = this.getPoints();

        context.beginPath();
        context.moveTo(points[0].x, points[0].y);
        for (var i = 1; i < this.sides; ++i) {
            context.lineTo(points[i].x, points[i].y);
        }
        context.closePath();
    },

如何检测我是否点击了多边形（在画布上绘制）？

0 个答案: