如何检测我是否点击了多边形(在画布上绘制)?

时间:2017-09-25 02:53:47

标签: javascript html5 canvas

我想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 个答案:

没有答案