Canvas绑定线的事件

最新推荐文章于 2024-08-16 09:16:46 发布

森丶米

最新推荐文章于 2024-08-16 09:16:46 发布

阅读量847

点赞数

CC 4.0 BY-SA版权

文章标签： canvs事件线的点击事件

本文链接：https://blog.youkuaiyun.com/guosen8876/article/details/88734535

博客介绍了处理Canvas线点击事件的方法，先保存所有的线，再使用isPointInStroke函数判断点击点是否在线上，并给出了获取画布上单击点坐标的代码示例。

1、先将所有的线保存起来。
2、使用isPointInStroke去判断是否在线上
function onClick(e) {
// 取得画布上被单击的点
var clickX = e.offsetX;
var clickY = e.offsetY;

    // 查找被单击的线（我这里存储的是两个点）
    for (var i = 0; i < circlesDot.length - 1; i++) {
       //拿到第一给点
        var circle = circlesDot[i];
        拿到第二个点
        var circleT = circlesDot[i+1];
        ctxN.beginPath();
        ctxN.lineWidth = 4;//这里比实际线的宽度宽了一倍
        ctxN.moveTo(circle.x, circle.y);
        ctxN.lineTo(circleT.x, circleT.y); 
        if (ctxN.isPointInStroke(clickX, clickY)) { 
            alert(circle.pipeLineObj.ID); break;
        }
        i++;
    } 
    //如果当前鼠标位置有圆圈，还要显示tip
    if (this.SelectedLineCircle != null) {
        alert(this.SelectedLineCircle.ID);
    }
}