Как удалить только строку с холста, а не все рисунки?

Question

Решение, которое я нашел, это clear the whole canvas, но я хочу удалить только одну строку не всех рисунков на холсте.

Что мне делать?

Answer 1

Нет простого способа сделать это, поскольку предыдущая информация о пикселях теряется после того, как вы рисуете что-либо. Здесь у Вас есть лучший ответ: clear line on HTML5 Canvas

В компьютерной графике при рисовании что-то, вы рисуете в буфер. И при вызове lineTo и штрих буфера обновляется, и все информация, которая находилась в базовых пикселях, теряется (или частично потеряна, если вы используете прозрачность), и нет способа вернуть ее отмена (если нет реализация, содержащая нагрузки старых чертежей , но это было бы очень тяжело для памяти).

Таким образом, чтобы иметь возможность отменить ход может сэкономить много времени CPU/GPU НО whould сильно увеличить объем памяти

Таким образом, единственный способ, кажется, использовать clearRect.

Answer 2

Возможно, вы попробуете библиотеку рисования javascript. Существует, например, библиотека oCanvas, где вы рисуете больше объектно-ориентированного. Существует функция remove, которая удаляет нарисованные объекты из холста.

Answer 3

@ danielfranca - это право, что линия, нарисованная на полотне, становится «непонятые пиксели в море пикселей холста».

Он также прав, что сохранение снимков снимка холста по мере того, как каждая строка рисуется и возврат к одному из этих сохраненных изображений для «удаления» строки является ресурсоемким. (Не используйте эту технику !!)

Но есть эффективный способ удаления ранее нарисованных линий на холсте!

Да, он очищает холст и перерисовывает линии, но очень быстро & эффективен ... Я обещаю!

Вот схема того, как сделать это:

• Определить линию внутри объекта, как это: { x0:10, y0:15, x1:100, y1:75 }

• Сделать, как многие из этих линий по желанию и подтолкнуть их в массив: var lines=[];

• Используйте определения линий в массиве lines [], чтобы нарисовать ваши линии на холсте.

• Слушайте mousemove и mousedown событий.

• На mousemove, итерации по линиям [] и найдите линию, ближайшую к мыши.Вот фрагмент алгоритма, который вычисляет, какая линия находится ближе всего к данному [Mx, My]:

  // Find the index of the line closest to mx,my 
  function setClosestLine(mx,my) { 
      // 
      closestLineIndex=-1; 
      var minDistanceSquared=100000000; 
      // 
      // examine each line & 
      // determine which line is closest to the mouse (mx,my) 
      for(var i=0;i<lines.length;i++){ 
       var line=lines[i]; 
       var dx=line.x1-line.x0; 
       var dy=line.y1-line.y0; 
       var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2; 
       var x=lerp(line.x0, line.x1, t); 
       var y=lerp(line.y0, line.y1, t); 
       var dx1=mx-x; 
       var dy1=my-y; 
       var distSquared=dx1*dx1+dy1*dy1; 
       if(distSquared<minDistanceSquared){ 
        minDistanceSquared=distSquared; 
        closestLineIndex=i; 
        closestX=x; 
        closestY=y; 
       } 
      } 
  }; 
  

• На MouseDown, используйте lines.splice(targetIndex,1) удалить определение ближайшей линии от линий [] массива. Затем очистите полотно и перерисуйте оставшиеся строки.

Вот аннотированный код и демо:

// canvas related variables 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 

 

 
ctx.lineWidth=2; 
 

 
// linear interpolation -- needed in setClosestLine() 
 
var lerp=function(a,b,x){ return(a+x*(b-a)); }; 
 

 
// vars to track which line is closest to the mouse 
 
var closestLineIndex=-1; 
 
var closestX,closestY; 
 

 
// make some random lines and save them in lines[] 
 
var n=5; 
 
var lines=[]; 
 
var randomX=function(){return(Math.random()*cw*.67);} 
 
var randomY=function(){return(Math.random()*ch*.67);} 
 
var lastX=randomX(); 
 
var lastY=randomY(); 
 
for(var i=0;i<n;i++){ 
 
    var x=Math.random()*cw*.67; 
 
    var y=Math.random()*ch*.67; 
 
    var dx=x-lastX; 
 
    var dy=y-lastY; 
 
    var line={ 
 
     x0:lastX, 
 
     y0:lastY, 
 
     x1:x, 
 
     y1:y, 
 
     weight:Math.round(Math.random()*20), 
 
     // precalc often used values 
 
     dx:dx, 
 
     dy:dy, 
 
     dx2dy2:dx*dx+dy*dy, 
 
    }; 
 
    lines.push(line); 
 
    lastX=x; 
 
    lastY=y; 
 
} 
 

 

 
redraw(); 
 

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

 

 
////////////////////////////// 
 
// functions 
 

 
// Find the index of the line closest to mx,my 
 
function setClosestLine(mx,my) { 
 
    // 
 
    closestLineIndex=-1; 
 
    var minDistanceSquared=100000000; 
 
    // 
 
    // examine each line & 
 
    // determine which line is closest to the mouse (mx,my) 
 
    for(var i=0;i<lines.length;i++){ 
 
     var line=lines[i]; 
 
     var dx=line.x1-line.x0; 
 
     var dy=line.y1-line.y0; 
 
     var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2; 
 
     var x=lerp(line.x0, line.x1, t); 
 
     var y=lerp(line.y0, line.y1, t); 
 
     var dx1=mx-x; 
 
     var dy1=my-y; 
 
     var distSquared=dx1*dx1+dy1*dy1; 
 
     if(distSquared<minDistanceSquared){ 
 
      minDistanceSquared=distSquared; 
 
      closestLineIndex=i; 
 
      closestX=x; 
 
      closestY=y; 
 
     } 
 
    } 
 
}; 
 

 
// clear & redraw all lines 
 
function redraw(){ 
 
    
 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 
    
 
    // draw all lines 
 
    ctx.strokeStyle='black'; 
 
    for(var i=0;i<lines.length;i++){ 
 
     var line=lines[i]; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(line.x0,line.y0); 
 
     ctx.lineTo(line.x1,line.y1); 
 
     ctx.stroke(); 
 
    } 
 

 
    // draw the line closest to the mouse in red 
 
    if(closestLineIndex<0){return;} 
 
    var line=lines[closestLineIndex]; 
 
    ctx.strokeStyle='red'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(line.x0,line.y0); 
 
    ctx.lineTo(line.x1,line.y1); 
 
    ctx.stroke(); 
 
} 
 

 
// On mousemove, find line closest to mouse 
 
function handleMouseMove(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    setClosestLine(mouseX,mouseY); 
 

 
    redraw(); 
 

 
} 
 

 
// On mousedown, remove line that was closest to mouse 
 
function handleMouseDown(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    if(closestLineIndex>=0){ 
 
     lines.splice(closestLineIndex,1); 
 
     redraw(); 
 
    } 
 
}

body { 
 
    background-color: ivory; 
 
} 
 
#canvas { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Closest line to mouse is drawn in red<br>Click to remove that line.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>