javascript - HTML/JavaScript : zoom and interact on a canvas element

Question

我是一名最近发现 Javascript 的生物信息学家，我对 canvas 元素有疑问。

不深入生物学细节，根据用户输入的一组基因，我想生成一个可视化的基因在每条染色体上的位置，这里是其中一条染色体的示例(仍然是摘要，还没有传说):

小黑线代表每个基因，但是如你所见，这个 View 非常全局，我们无法清楚地看到基因(实际上是黑色矩形)

我添加了另一个 Canvas 元素，即绿色描边矩形，我希望当用户点击放大这个虚构的矩形时，这个区域会出现缩放，就像这个例子: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/

我不知道 Canvas 元素是否可行，我尝试使用 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 是绿色矩形，如您所见，我距离重现链接上的示例很远(我想先尝试一个简单的点击事件)

希望我把问题表达清楚了

Answer 1

要“放大” Canvas ，您可以使用 CanvasContext2D 对象的 .setTransform 方法。下面是一些用于说明的示例代码。请注意:这只是一个最小的实现，您必须根据您的需要进行调整。相关部分可以在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>