Question

我有sample连接4个点。

我想要的是[S，T，A，R]的字母不是继续字母。一旦用户点击绘图，它将使用用户想要的新坐标绘制[S，T，A，R]的另一个点。

示例代码段：

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

Answer 1

要让它只有字母[S,T,A,R]，您可以拥有一个包含这些字母的字母数组，并让addAnchor()逐步使用该数组中的项目（并执行mod Array.length包围重新开始）：

var letters = ["S", "T", "A", "R"];

function addAnchor(x,y){
    anchors.push({
        label:letters[nextLetter],
        x:x,
        y:y,
    });
    nextLetter = (nextLetter+1) % letters.length;
}

Fiddle Example

请注意，您可能希望在清除画布时重置nextLetter的值。

对于只有一个集合，你有相同的数组，而是删除第一个元素，只在数组不为空时添加一个节点：

function addAnchor(x,y){
    if(letters.length)
    {
        anchors.push({
            label:letters[0],
            x:x,
            y:y,
        });
        letters.shift();    
    } 
}

然后你可以在单击绘图按钮时添加字母（你可以像这样设置数组，或者根据你想做的事情在数组上附加四个字母）：< / p>

 $("#draw").click(function(){
    letters = ["S", "T", "A", "R"];
 });

Fiddle Example

如何在HTML Canvas

1 个答案: