在Canvas中实现选中直线

先上图
代码
<!DOCTYPE html>
<html>
<head>
    <title>选中Canvas中的直线</title>
</head>
<body>
    <canvas id="myCanvas">Your browser does not support HTML5 Canvas. </canvas>
</body>
</html>
<script type="text/javascript">
    var myCanvas = document.getElementById("myCanvas");
    myCanvas.style.cssText = "position:absolute;left:0;top:0; border: 1px solid #ccc;"; // 画布样式
    myCanvas.width = 800;   // 画布的宽度
    myCanvas.height = 800;  // 画布的高度 
    var ctx = myCanvas.getContext('2d');

    var a = 300, b = 300;   // 原点        
    var lines = [
        { p1: { x: a, y: b }, p2: { x: a + 200, y: b }, flag: 0, },       // 原点右移200px;
        { p1: { x: a, y: b }, p2: { x: a, y: b - 200 }, flag: 0 },        // 原点上移200px;    
        { p1: { x: a, y: b }, p2: { x: a - 200, y: b }, flag: 0 },        // 原点左移200px;    
        { p1: { x: a, y: b }, p2: { x: a, y: b + 200 }, flag: 0 },        // 原点下移200px;    
        { p1: { x: a, y: b }, p2: { x: a + 100, y: b - 80 }, flag: 0 },   // 第1象限        
        { p1: { x: a, y: b }, p2: { x: a - 100, y: b - 100 }, flag: 0 },  // 第2象限
        { p1: { x: a, y: b }, p2: { x: a - 100, y: b + 100 }, flag: 0 },  // 第3象限
        { p1: { x: a, y: b }, p2: { x: a + 100, y: b + 80 }, flag: 0 },   // 第4象限
        { p1: { x: 100, y: 580 }, p2: { x: 200, y: 550 }, flag: 0 },
        { p1: { x: 200, y: 580 }, p2: { x: 300, y: 600 }, flag: 0 },
        { p1: { x: 80, y: 520 }, p2: { x: 10, y: 450 }, flag: 0 },
        { p1: { x: 10, y: 490 }, p2: { x: 60, y: 480 }, flag: 0 },
    ];

    // 画线
    drawAllLines();

    // Click 事件
    myCanvas.onclick = function (e) {
        // 鼠标点击的坐标
        var px = e.clientX,
            py = e.clientY;

        // 逐条线确定是否有点中
        var offset = 5;                         // 可接受（偏移）范围
        for (var i = 0; i < lines.length; i++) {
            var p1 = lines[i].p1;               // 直线起点
            var p2 = lines[i].p2;               // 直线终点 
            var flag = 0;                       // 1 - 点中
            var minX = Math.min(p1.x, p2.x);    // 较小的X轴坐标值
            var maxX = Math.max(p1.x, p2.x);    // 较大的X轴坐标值
            var minY = Math.min(p1.y, p2.y);    // 较小的Y轴坐标值
            var maxY = Math.max(p1.y, p2.y);    // 较大的Y轴坐标值

            if (p1.y === p2.y) {
                // 水平线
                if ((px >= minX && px <= maxX) && (py >= minY - offset && py <= maxY + offset)) {
                    flag = 1;
                    lines[i].crossPoint = { x: px, y: p1.y };         // 直线上交叉点  
                }

            }
            else if (p1.x === p2.x) {
                // 垂直线
                if ((py >= minY && py <= maxY) && (px >= minX - offset && px <= maxX + offset)) {
                    flag = 1;
                    lines[i].crossPoint = { x: p1.x, y: py };       // 直线上交叉点  
                }
            }
            else {
                // 斜线 (先判断点是否进入可接受大范围(矩形)，然后再根据直线上的交叉点进行小范围比较)
                if ((px >= minX && px <= maxX) && (py >= minY - offset && py <= maxY + offset)) {
                    //求Y轴坐标
                    //方法1：根据tanθ= y/x = y1/x1, 即y = (y1/x1)*x  (该方法有局限性，垂直线(p2.x - p1.x)=0，不能用)
                    //var y = ((p2.y - p1.y) / (p2.x - p1.x)) * (px - p1.x);

                    //方法2：先求弧度hudu，根据cosθ=x/r, r=x/cosθ,求得r，再根据sinθ=y/r, y=sinθ*r, 求得y 
                    var hudu = Math.atan2(p2.y - p1.y, p2.x - p1.x);        // 直线的弧度(倾斜度)
                    // 用三角函数计出直线上的交叉点
                    var r = (px - p1.x) / Math.cos(hudu);                   // 直角三角形的斜边（或理解成圆的半径）
                    var y = Math.sin(hudu) * r;                             // Y轴坐标

                    var p = { x: px, y: p1.y + y };                         // 直线上的交叉点
                    if ((Math.abs(px - p.x) <= offset) && (Math.abs(py - p.y) <= offset)) {
                        flag = 1;                                           // 1 - 点中
                    }
                    lines[i].crossPoint = p;                                // 直线上的交叉点
                }
            }

            if (flag === 1) {
                lines[i].flag = ((lines[i].flag + 1) % 2);                  // 0、1切换
                break;
            }
        }
        // 重画线
        drawAllLines();
    };

    // 画所有线函数
    function drawAllLines() {
        // 清空画布
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

        // 画出逐条线
        for (var i = 0; i < lines.length; i++) {
            var color = lines[i].flag === 1 ? "orange" : "blue";

            drawLine(ctx, lines[i].p1, lines[i].p2, color);

            // 画交叉点
            if (lines[i].crossPoint) {
                drawPoint(lines[i].crossPoint.x, lines[i].crossPoint.y);
            }
            lines[i].crossPoint = null;
        }
    }

    // 画单条线函数
    function drawLine(ctx, p1, p2, color) {
        color = color || 'blue';
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
        ctx.closePath();

        // 计算弧度
        var hudu = Math.atan2(p2.y - p1.y, p2.x - p1.x);
        var msg = "x:" + p2.x + " y:" + p2.y + " 弧度：" + hudu + " (rad)";
        // 线长 
        var l1 = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
        msg = msg + " 线长: " + l1;

        ctx.fillText(msg, p2.x, p2.y);
    }

    // 画圆点
    function drawPoint(x, y, color) {
        color = color || 'red';
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    }
</script>
在Canvas中实现选中直线

猜你喜欢
