Как привязать график к системе координат canvas?

Question

[Максим]

Как привязать систему координат, без отрицательных значений от 0, по y - были секунды, по x - коэффициенты и если например стрелка выходит за границы, то добавлять на систему координат значения как здесь https://www.wink.org/?r=cryptofriend#/platform/dic...

пока так и дальше я в затупе

var canvas = document.getElementById('crash-canvas');
var ctx = canvas.getContext('2d');

requestAnimationFrame(animate)

function lerp(a,b,t) {
  return a + (b-a)*t
}

function animate(t){
  t /= 2000;
  if (t > 1) return;
  let x = lerp(10, 590, t)
  let y = lerp(390, 100, t)
  ctx.clearRect(0, 0, canvas.width, canvas.height);	
  arrow({x: 10, y: 390}, {x, y}, 20);
  requestAnimationFrame(animate)
}

function arrow (p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y) , (p2.x - p1.x));
  var hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));

  ctx.save();
  ctx.translate(p1.x, p1.y);
  ctx.rotate(angle);

  
  // line
  ctx.strokeStyle = '#01f593';
  ctx.lineWidth = "5";
  ctx.beginPath();	
  ctx.moveTo(0, 0);
  ctx.lineTo(hyp - size, 0);
  ctx.stroke();

  // triangle
  ctx.fillStyle = '#01f593';
  ctx.beginPath();
  ctx.lineTo(hyp - size , size/2);
  ctx.lineTo(hyp, 0);
  ctx.lineTo(hyp - size, -size/2);
  ctx.fill();

  ctx.restore();

  ctx.fillStyle = '#01f59344';
  ctx.beginPath();
  ctx.lineTo(0,390);
  ctx.lineTo(p2.x, p2.y);
  ctx.lineTo(p2.x,390);
  ctx.fill();
}

body {
  background:black
}

<canvas width="999" height="400" id="crash-canvas" style="width: 999px; height: 400px;"></canvas>

Answer 1

[Karpion]

Я немного не в теме, заглянул случайно. И не очень понял вопрос.

Допустим, Вы хотите отображать на экране набор точек с известными координатами. И неизвестно заранее, в каких пределах будут координаты точек.
Допустим, точки появляются по одной, и после появления каждой надо её отобразить.
Тогда при появлении новой точки надо посчитать максимальную координату по X и по Y. Точнее, достаточно сравнить X и Y новой точки с максимальными X и Y по прежним точкам. Если они не изменились (т.е. X новой точки не превышает максимального X по старым точкам, и аналогично по Y), то просто дорисовываем новую точку.
А вот если хотя бы по одной координате произошло превышение - то надо перерисовать все точки в новом масштабе.

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

Comments

[Максим]

да, но как это реализовать кодом?