Блог

Я использую технику анимированного рисования линий для создания линий между каждой из моих точек. Как только точка активирована, я хочу, чтобы старая точка была удалена. Я установил clearRect за пределами своего интервала, но он не удаляет старую строку. В моем предыдущем коде (до создания setInterval) все работало безупречно, с момента добавления setinterval не так много.

Вот сценарий только для очистки / создания. Спасибо вам за вашу помощь.

 function draw(st,en){  var c = document.getElementById("map_id");  var ctx = c.getContext("2d");  ctx.clearRect(0, 0, c.width, c.height);  ctx.translate(0.5, 0.5);  var amount = 0;    setInterval(function() {  amount  = 0.05; // change to alter duration  if (amount gt; 1) amount = 1;  ctx.clearRect(0, 0, c.width, c.height);  ctx.strokeStyle = "#ccc";  ctx.moveTo(st['x'], st['y']);  ctx.lineWidth = 5;  // lerp : a   (b - a) * f  ctx.lineTo(st['x']   (en['x'] - st['x']) * amount, st['y']   (en['y'] - st['y']) * amount);  ctx.stroke();  }, 30);  }  

Обновить **** Я нашел сообщение, касающееся моей проблемы. В нем говорится, что мне нужно включить beginPath. Я так и сделал, но теперь я вижу мерцание своих строк, что означает, что setInterval не останавливается после его завершения.

Таким образом, проверка завершения нарисованной линии для снятия интервала является решением. Почти на месте.

У вас есть решение моей проблемы.

Я отследил сумму var, чтобы определить, когда она достигла 1, с помощью окна if ( сумма == 1). clearInterval(map_int)

Проблема решена! Смотрите решение ниже

 function draw(st,en){  var c = document.getElementById("map_id");  var ctx = c.getContext("2d");  ctx.clearRect(0, 0, c.width, c.height);  ctx.translate(0.5, 0.5);  var amount = 0;    let map_int = setInterval(function() {  amount  = 0.05; // change to alter duration  if (amount gt; 1) amount = 1;  ctx.beginPath();  ctx.clearRect(0, 0, c.width, c.height);  ctx.strokeStyle = "#ccc";  ctx.moveTo(st['x'], st['y']);  ctx.lineWidth = 5;  // lerp : a   (b - a) * f  ctx.lineTo(st['x']   (en['x'] - st['x']) * amount, st['y']   (en['y'] - st['y']) * amount);  ctx.stroke();  if(amount == 1) window.clearInterval(map_int);  }, 15);  }