我想DIY一个画布动画库,在我添加各种形状后,我需要为它们添加事件进行交互。
注意我知道API isPointInPath(),虽然它可以在浏览器中运行良好但我想在没有
的WeiXin App中执行isPointInPath
这是我的所有形状
如果我点击圆圈和矩形,很容易检测到。
圈,说(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();
},