假设 arr=[graphical-1, graphical-2, graphical-3]; arr存储了3个多边型的路径
图形显示顺序是3>2>1 3出现在顶层,1在最底层
鼠标点击的时候 让arr倒序循环判断 e.offsetX,和e.offsetY是否在多边形中 第一次为true时的元素就是被点击到的
for(let i = arr.length; i >0; i --)
{
ctx.beginPath();
arr[i].forEach( (point) =>{ ctx.lineTo(point.x, point.y) });
ctx.closePath();
if(cxt.isPointInPath(e.offsetX, e.offsetY)
{
console.log("被点击的图形路径",arr[i]);
break;
}
}
如果3和2完全覆盖了1 上面的操作永远也点击不到1,怎么办呢?
鼠标滑动的时候遍历出所有路径中出现移动点的图形
对arr重新排序遍历出的图形轮番按一定时间间隔出现在数组的末尾
对arr所有图形重绘 点击的时候数组的最后一个元素就是被点击的图形
点击完成后使用原始arr重新绘制图形