Продолжить рисование линии в HTML-холсте

У меня есть jsfiddle, который создает узор из 4 точек.Продолжить рисование линии в HTML-холсте

То, что я хочу, чтобы она постоянно рисовать проецируемую линию до нажатия пользователя для точки В, то точке 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); 
} 

}

источник

2015-09-09 Anonymous

Итак, вы хотите прекратить действие, когда пользователь нажимает точку B и запускает все остальные точки подключения. –

Что я хочу, так это для строки, отображающей (проецируемые линии) для каждой точки. Окончательный результат не будет изменен. –

Значит, вы хотите, чтобы линии предварительного просмотра в то время как mousemoving (предположительно в другом цвете?) – DrunkWolf

ИТАК, в основном вам нужен разъем добавив функцию, чтобы быть немного умнее, так что мы можем сделать эту работу как в этом 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 modular 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.

Теперь все, что вам нужно сделать, это рассказать, что нужно рисовать при каждом наведении курсора мыши, а также в виале, линии предварительного просмотра.

источник

2015-09-09 10:30:01 DrunkWolf

Продолжить рисование линии в HTML-холсте

ответ

Смежные вопросы