canvas判定重叠区点击了谁

假设 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重新绘制图形