近期在做一个贴纸功能,里面需要判断点击坐标是否处于贴纸范围,该贴纸经过了旋转和缩放。html5的canvas支持isPointInPath方法快速判断点击是否属于某多边形区域,但是微信小程序并不支持.
研究了一番,使用了ray-crossing算法的判断方法如下(在边缘线的也算进去了):
function isPointInPolygon (point, target) { const targetSize = target.length; let nCross = 0; for (let i = 0; i < targetSize; i += 1) { const p1 = target[i]; const p2 = target[(i + 1) % targetSize]; if (point.y < Math.min(p1.y, p2.y)) continue; if (point.y > Math.max(p1.y, p2.y)) continue; if (p1.y == p2.y) { const minX = Math.min(p1.x, p2.x); const maxX = Math.max(p1.x, p2.x); if (point.y == p1.y && (point.x >= minX && point.x <= maxX)) { return true; } } else { const x = ((point.y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x; if (x == point.x) { return true; } else if (x > point.x) { nCross++; } } } return nCross % 2 == 1; }
参考文章:https://blog.csdn.net/yanjunmu/article/details/46723407