javascript - 如何制作平行线图

我有这个[样本][1]，我想要的是有这个结果[！[在此处输入图像描述][2]][2]
注：
a.）1和2将被连接，3将在第三次鼠标点击中产生。
b.）1、2、3应连续申报。
c.）1和2可延伸至宽度
d.）3应延伸至高度。
e.）1、2、3应作为一个整体（一起）拖动。
申报方式为1比2（水平）和2比3（垂直）。

function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();

startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);

draggingIndex=-1;
for(var i=0;i<anchors.length;i++){
    var a=anchors[i];
    var dx=startX-a.x;
    var dy=startY-a.y;
    if(dx*dx+dy*dy<radius*radius){
        draggingIndex=i;
        break;
    }
}

//Detect if we're on a line:
fullDrag = mouseOnLine({x:startX, y: startY});

// If a drag hasn't started, add another anchor here
if(draggingIndex==-1 && fullDrag == null){
    addAnchor(startX,startY);
    var al = anchors.length-1;
    var almod4 = al%2;
    if(almod4==1){
        connectors.push({start:al-1,end:al});
    }
    if(almod4==2){
        connectors.push({start:al-2,end:al});
        connectors.push({start:al-1,end:al});
    }
    draw();
}
}

最佳答案

我想，你可以用实际鼠标点的坡度。三角洲只使用了一半。

deltaX = (anchors[al - 1].x - anchors[al].x) / 2;
deltaY = (anchors[al - 1].y - anchors[al].y) / 2;
ctx.strokeStyle = 'purple';
ctx.beginPath();
ctx.moveTo(mouseX - deltaX, mouseY - deltaY);
ctx.lineTo(mouseX + deltaX, mouseY + deltaY);
ctx.stroke();

工作示例：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    cw = canvas.width,
    ch = canvas.height,
    mouseX, mouseY,
    offsetX, offsetY,
    startX, startY,
    radius = 5,
    nextLetter = 0,
    anchors = [],
    connectors = [],
    draggingIndex = -1,
    fullDrag = null;

reOffset();
window.onscroll = function (e) { reOffset(); }
window.onresize = function (e) { reOffset(); }

function reOffset() {
    var BB = canvas.getBoundingClientRect();
    offsetX = BB.left;
    offsetY = BB.top;
}

function addAnchor(x, y) {
    anchors.push({
        x: x,
        y: y,
    });
}

draw();

$("#canvas").mousedown(function (e) { handleMouseDown(e); });
$("#canvas").mousemove(function (e) { handleMouseMove(e); });
$("#canvas").mouseup(function (e) { handleMouseUpOut(e); });
$("#canvas").mouseout(function (e) { handleMouseUpOut(e); });

$("#clear").click(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    anchors = [];
    connectors = [];
});

function draw() {
    var deltaX, deltaY;
    var al = anchors.length - 1;
    //
    ctx.clearRect(0, 0, cw, ch);
    ctx.strokeStyle = 'black';
    // draw connecting lines
    for (var i = 0; i < connectors.length; i++) {
        var c = connectors[i];
        var s = anchors[c.start];
        var e = anchors[c.end];

        ctx.beginPath();
        ctx.moveTo(s.x, s.y);
        ctx.lineTo(e.x, e.y);
        ctx.stroke();
        //alert(anchors.length);
    }

    //draw lines
    if (anchors.length > 0 && anchors.length % 3 > 0) {
        ctx.strokeStyle = 'grey';

        var almod4 = al % 2;
        if (almod4 == 1 || almod4 == 2) {
            //draw extra line
            ctx.beginPath();
            ctx.moveTo(anchors[al - 1].x, anchors[al - 1].y);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();

            // part for parallel line
            deltaX = (anchors[al - 1].x - anchors[al].x) / 2;
            deltaY = (anchors[al - 1].y - anchors[al].y) / 2;
            ctx.strokeStyle = 'purple';
            ctx.beginPath();
            ctx.moveTo(mouseX - deltaX, mouseY - deltaY);
            ctx.lineTo(mouseX + deltaX, mouseY + deltaY);
            ctx.stroke();
        }
        ctx.strokeStyle = 'grey';
        ctx.beginPath();
        ctx.moveTo(anchors[al].x, anchors[al].y);
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
    }

    // draw circles
    for (var i = 0; i < anchors.length; i++) {
        ctx.beginPath();
        ctx.arc(anchors[i].x, anchors[i].y, radius, 0, Math.PI * 2);
        ctx.fill();
    }
}

function handleMouseDown(e) {
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    draggingIndex = -1;
    for (var i = 0; i < anchors.length; i++) {
        var a = anchors[i];
        var dx = startX - a.x;
        var dy = startY - a.y;
        if (dx * dx + dy * dy < radius * radius) {
            draggingIndex = i;
            break;
        }
    }

    //Detect if we're on a line:
    fullDrag = mouseOnLine({ x: startX, y: startY });

    // If a drag hasn't started, add another anchor here
    if (draggingIndex == -1 && fullDrag == null) {
        addAnchor(startX, startY);
        var al = anchors.length - 1;
        var almod4 = al % 2;
        if (almod4 == 1) {
            connectors.push({ start: al - 1, end: al });
        }
        if (almod4 == 2) {
            connectors.push({ start: al - 2, end: al });
            connectors.push({ start: al - 1, end: al });
        }
        draw();
    }
}

function handleMouseUpOut(e) {
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    draggingIndex = -1;
    fullDrag = null;
}

function handleMouseMove(e) {

    //if(draggingIndex<0 && fullDrag == null){return;}
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    if (draggingIndex >= 0) {
        // tell the browser we're handling this event
        e.preventDefault();
        e.stopPropagation();

        var a = anchors[draggingIndex];
        a.x += (mouseX - startX);
        a.y += (mouseY - startY);
        startX = mouseX;
        startY = mouseY;
    } else if (fullDrag != null) {

        var startPoints = Math.floor(fullDrag.start / 4) * 4;

        for (var i = 0; i < 2; i++) {
            anchors[startPoints + i].x += (mouseX - startX);
            anchors[startPoints + i].y += (mouseY - startY);
        }

        startX = mouseX;
        startY = mouseY;
    }
    draw();
}

function mouseOnLine(mousePos) {
    var i, pA, pB, first, second;

    for (i = 0 ; i < connectors.length; i++) {
        pA = anchors[connectors[i].start];
        pB = anchors[connectors[i].end];
        first = distanceBetween(pA, mousePos) + distanceBetween(pB, mousePos);
        second = distanceBetween(pA, pB);
        if (Math.abs(first - second) < 0.3) {
            return connectors[i];
        }
    }
    return null;
}

var distanceBetween = function (point1, point2) {
    var distX = Math.abs(point1.x - point2.x);
    var distY = Math.abs(point1.y - point2.y);
    return Math.sqrt((distX * distX) + (distY * distY));
}

#canvas{border:1px solid red; }

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<canvas id="canvas" width=500 height=500></canvas>

关于javascript - 如何制作平行线图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32622654/