html5中监听canvas内部元素点击事件的三种方法

每一步都很简单，实现如下：

//计算两点距离
const getDistence = function (p1, p2) {
return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))
};
//角度法判断点在多边形内部
const checkPointInPolyline = (point, polylinePoints) => {
let totalA = 0;
const A = point;
for (let i = 0; i < polylinePoints.length; i++) {
let B, C;
if (i === polylinePoints.length - 1) {
B = {
x: polylinePoints[i][0],
y: polylinePoints[i][1]};
C = {
x: polylinePoints[0][0],
y: polylinePoints[0][1]};
} else {
B = {
x: polylinePoints[i][0],
y: polylinePoints[i][1]};
C = {
x: polylinePoints[i + 1][0],
y: polylinePoints[i + 1][1]};
}
//计算角度
const angleA = Math.acos((Math.pow(getDistence(A, C), 2) + Math.pow(getDistence(A, B), 2) - Math.pow(getDistence(B, C), 2)) / (2 * getDistence(A, C) * getDistence(A, B)))
totalA += angleA
}
//判断角度之和
return totalA === 2 * Math.PI
}

这个方法有一个局限性，就是图形必须是 凸多边形 。如果不是凸多边形需要先切割成凸多边形再计算，这就比较复杂了。

类似的思路还有面积法，如果一个点在多边形内部，那么该点与多边形所有顶点两两构成的三角形，面积相加应该等于多边形的面积，首先计算多边形的面积就很麻烦，所以这种方法可以直接pass掉。

射线法

射线法是一个我讲不清道理但非常好用的方法，只要判断点与多边形一侧的交点个数为奇数，则点在多边形内部。需要注意的是，只要数任何一侧的焦点个数就可以，比如左侧。这个方法不限制多边形的类型，凸多边形、凹多边形甚至环形都可以。

实现起来也非常简单：

const checkPointInPolyline = (point, polylinePoints) => {
//射线法
let leftSide = 0;
const A = point;
for (let i = 0; i < polylinePoints.length; i++) {
let B, C;
if (i === polylinePoints.length - 1) {
B = {
x: polylinePoints[i][0],
y: polylinePoints[i][1]};
C = {
x: polylinePoints[0][0],
y: polylinePoints[0][1]};
} else {
B = {
x: polylinePoints[i][0],
y: polylinePoints[i][1]};
C = {
x: polylinePoints[i + 1][0],
y: polylinePoints[i + 1][1]};
}
//判断左侧相交
let sortByY = [B.y, C.y].sort((a,b) => a-b)
if (sortByY[0] < A.y && sortByY[1] > A.y){
if(B.x<A.x || C.x < A.x){
leftSide++
}
}
}
return leftSide % 2 === 1								 
 2/3   首页 上一页 1 2 3 下一页 尾页