HTML / Javascript：在画布元素上缩放并进行交互

Question

我是一位生物信息学家，最近发现了Javascript，并对画布元素有疑问。

根据用户输入的一组基因，无需深入研究生物学细节，我想生成每个染色体上基因位置的可视化图像，这里是其中一个染色体的示例（仍是总结，还没有传说）：

黑色细线代表每个基因，但是正如您所看到的，这种观点非常笼统，我们无法清楚地看到这些基因（实际上是黑色矩形）

我添加了另一个画布元素，即绿色的笔触矩形，并且我希望当用户单击以放大该虚拟矩形时，在该区域上进行缩放，就像在此示例上一样： https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/

我不知道画布元素是否可行，我尝试使用contexte.scale（2,2），但是它只是放大了图像，而没有放大

function zoom() {
    var path1 = new Path2D();
    path1.rect(20, 150, 1160, 150); 
    context.stroke(path1);
    canvas.addEventListener("click", function(e) {
    var r = canvas.getBoundingClientRect(),

      x = e.clientX - r.left,
      y = e.clientY - r.top;

    if (context.isPointInPath(path1, x, y)) {
        contexte.scale(2,2)
    ;
  };
})
}

path1是绿色矩形，如您所见，我已经很远了，无法在链接上重现示例（我想先通过简单的click事件尝试）

我希望我已经明确表达了这个问题

Answer 1

要“放大”画布，可以使用.setTransform对象的CanvasContext2D方法。以下是一些用于说明的示例代码。请注意：这只是一个最小的实现，您必须对其进行调整以适应需要。相关部分可以在zoomInOut函数中看到。

var points = [10, 12, 13, 16, 23, 27, 28, 29, 35, 42, 60, 62, 73, 76, 83, 87, 88, 89, 105, 142];
var canvas = document.querySelector('#surface');
var ctx = canvas.getContext('2d');
var zoomed = false; // track zoomed state

function clear () {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawPoints () {
  clear(); // make sure to clear previously created elements
  points.forEach(function (x) {
    ctx.fillStyle = '#000';
    ctx.fillRect(x, 20, 1, 20);
  });
}

function zoomInOut () {
  if (!zoomed) { // not zoomed in?
    ctx.setTransform(2, 0, 0, 2, 0, 0);
  } else { 
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }
  zoomed = !zoomed;
  drawPoints();
}

canvas.addEventListener('click', zoomInOut);
drawPoints();

<canvas id="surface" width="400", height="200"></canvas>