在 HTML canvas 中继续画线

Question

我有这个 jsfiddle，它创建了一个 4 点的模式。

我想要的是连续绘制投影线，直到用户点击 B 点，然后是 C 点和 D 点。

function draw(){

//
ctx.clearRect(0,0,cw,ch);

// 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();
}   

// 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(); 
    ctx.fillText(anchors[i].label,anchors[i].x-5,anchors[i].y-15); 
}

}

Answer 1

好的，基本上你需要你的连接器添加功能稍微聪明一些，所以我们可以像这样fiddle

（您正在为许多连接器添加方式，并且它在长度超过 7 时停止，这解决了这两个问题）

    if(draggingIndex==-1 && fullDrag == null){
        addAnchor(startX,startY);
        var al = anchors.length-1;
        var almod4 = al%4;
        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});
        }
        if(almod4==3){
            connectors.push({start:al-2,end:al});
            connectors.push({start:al-1,end:al});
        }
        draw();
    }

可以看到，根据anchors.length-1模4的值，我们就知道是需要画1条线还是2条线。在我们的绘制函数中，我们可以添加：

 if (anchors.length>0 && anchors.length%4>0){
       ctx.strokeStyle='gray';
       var al = anchors.length-1;
       var almod4 = al%4;
       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();
       }
       ctx.beginPath();
       ctx.moveTo(anchors[al].x,anchors[al].y);
       ctx.lineTo(mouseX,mouseY);
       ctx.stroke();
    }

请注意，我们不是检查 almod4 是 2 还是 3，而是检查 1 和 2，因为这意味着我们正在添加 2 或 3。

现在您需要做的就是让它在每次鼠标悬停时绘制，瞧，预览线。

在 HTML canvas 中继续画线

Continue drawing line in HTML canvas

javascript

jquery

canvas

html5-canvas