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画布中绘制线条

1 个答案: