javascript - 在 HTML Canvas 上渲染 x 轴，当用户在 Canvas 上平移时进行调整

Question

我想在 HTML canvas 上呈现一个时间 x 轴，它会在我平移(通过单击+拖动)或缩放时进行调整。

可能存在图表 JS 库来为曲线/图表执行此操作，但在我的情况下，x 轴上的数据不会是曲线，因此我需要从头开始。

在这里，当我在背景上单击并拖动时，原点 x 会适应，这很好(请参阅代码片段)。 但是如何在 canvas 的底部呈现这样的文本 x 轴？

--------------------------------------------------
|           |           |            |           |
jan 02      jan 03      jan 04       jan 05      jan 06

var drag = false;
var x = 0;
var last_position = {};

document.getElementById('canvas').onmousedown = function() { drag = true; }
document.getElementById('canvas').onmouseup = function() { drag = false; }
document.getElementById('canvas').onmousemove = function(e) { 
  var deltaX = last_position.x - e.clientX,
      deltaY = last_position.y - e.clientY;
  if (drag && typeof(last_position.x) != 'undefined') { 
    x += deltaX;
    document.getElementById('pos').innerHTML = x; 
  } 
  last_position = { x : e.clientX, y : e.clientY };  
}

#canvas { width: 400px; height: 150px; background-color: #ccc; }

<canvas id="canvas"></canvas>
<div id="pos"></div>

Answer 1

您需要做的就是从所需的屏幕坐标中减去 x 位置，请参见下面的示例。

/* 
 * Your original code: 
 */
var drag = false;
var x = 0;
var last_position = {};

document.getElementById('canvas').onmousedown = function() { drag = true; }
document.getElementById('canvas').onmouseup = function() { drag = false; }
document.getElementById('canvas').onmousemove = function(e) { 
  var deltaX = last_position.x - e.clientX,
      deltaY = last_position.y - e.clientY;
  if (drag && typeof(last_position.x) != 'undefined') { 
    x += deltaX;
    document.getElementById('pos').innerHTML = x; 
  } 
  last_position = { x : e.clientX, y : e.clientY };
}

/*
 * A simple draw text method:
 */
function drawText(context, text, x, y) {
  context.font = "12px Arial";
  context.fillStyle = "red";
  context.textAlign = "center";
  context.fillText(text, x, y);
}

/*
 * The below uses 'requestAnimationFrame' to run a rendering loop:
 * For more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame 
 */
function render() {

  var canvas = document.getElementById('canvas')
  var context = canvas.getContext("2d");

  /* We must clear the canvas before rendering anything else... */
  context.clearRect(0, 0, canvas.width, canvas.height);

  /* This could be improved a fair bit, consider using a loop / non magic numbers. */
  drawText(context, "Jan 1st", 30 - x, canvas.height - 12);
  drawText(context, "Jan 2nd", 100 - x, canvas.height - 12);
  drawText(context, "Jan 3rd", 170 - x, canvas.height - 12);
  drawText(context, "Jan 4th", 240 - x, canvas.height - 12);
  drawText(context, "Jan 5th", 310 - x, canvas.height - 12);

  requestAnimationFrame(render);
}
render();

#canvas { width: 400px; height: 150px; background-color: #ccc; }

<canvas id="canvas"></canvas>
<div id="pos">0</div>

请注意，这可以在效率和清洁度方面得到相当大的改进 - 即您不应该渲染屏幕外的文本。