Question

我正在努力使这个画布绘图放大和缩小并平移它。有一些平移和缩放图像的例子，但我的情况不同，我不知道在我的情况下我应该做什么或怎么做因为它不是图像。我会很感激您建议的任何提示或任何图书馆吗？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        canvas{border:#666 1px solid;}

    </style>
  <script type="application/javascript" language="javascript">
  window.onload=draw;//execute draw function when DOM is ready
    function  draw(){
        //assign our canvas element to a variable
          var canvas=document.getElementById('canvas1');
        //create the html5 context object to enable draw methods
          var ctx=canvas.getContext("2d");

              ctx.beginPath();
              ctx.arc(150, 200, 20, 0, 2 * Math.PI);
              ctx.fill();

              ctx.beginPath();
              ctx.moveTo(150,200);
              ctx.lineTo(230,75);
              ctx.stroke();

              ctx.beginPath();
              ctx.arc(230, 75, 20, 0, 2 * Math.PI);
              ctx.fill();

              ctx.beginPath();
              ctx.moveTo(230,75);
              ctx.lineTo(300,200);
              ctx.stroke();

              ctx.beginPath();
              ctx.arc(300,200, 20, 0, 2 * Math.PI);
              ctx.fill();

              ctx.beginPath();
              ctx.moveTo(300,200);
              ctx.lineTo(150,200);
              ctx.stroke();

              ctx.beginPath();
              ctx.moveTo(300,200);
              ctx.lineTo(225,300);
              ctx.stroke();

              ctx.beginPath();
              ctx.arc(225,300, 20, 0, 2 * Math.PI);
              ctx.fill();





          //fillStyle (r, g, b, alpha)
            //ctx.fillStyle = "rgba(0,200,0,1)";
          //fillRect (X, Y, Width, height)
            //ctx.fillRect(36,10,220,120);
    }
    </script>
</head>
  <body>
      <center>
      <canvas id="canvas1" width="800" height="600" ></canvas>
  </body>
</html>

这是我的绘图的截图，我试图让它放大鼠标光标：

canvas drawing

Answer 1

Panzoom（https://github.com/timmywil/panzoom）说，它支持平移和缩放几乎所有HTMLElement，包括画布：

Panzoom使用CSS转换来利用硬件/ GPU 浏览器中的加速，这意味着该元素可以是任何东西：图片，视频，iframe，画布，文本等。

Answer 2

如果可以使用按钮代替“拖动以平移”，可以使用translate方法进行平移。您也可以使用save() and restore()方法或以下方法。这是我在类似情况下使用的，但是我使用过按钮：

<html>
<head>
<script>
window.onload = function() {
   scale = 1;
   canvas = document.getElementById("canvas"); //Replace with id of your canvas
   ctx = canvas.getContext("2d");
   ctx.translate(150, 75);
   drawcanvas();
} 
  
function drawcanvas() {
  ctx.beginPath();
  //call to function(s) which draws necessary things
  //..
  //..
  drawarrow(ctx);
  ctx.stroke(); 
}
    
function clearcanvas() {
  let current_transform = ctx.getTransform();
  ctx.setTransform(1.1, 0, 0, 1.1, 0, 0);
  ctx.clearRect(0, 0, canvas.width*scale, canvas.height*scale);
  ctx.setTransform(current_transform);
}

function zoomin() {
  clearcanvas();
  scale = 1.1;
  ctx.scale(scale, scale);
  drawcanvas();
}

function zoomout() {
  clearcanvas();
  scale = 1.0/1.1;
  ctx.scale(scale, scale);
  drawcanvas();
}

function moveleft() {
  clearcanvas();
  ctx.translate(-10, 0);
  drawcanvas();
}

function moveright() {
  clearcanvas();
  ctx.translate(10, 0);
  drawcanvas();
}
</script>
</head>

<body>
  <canvas id="c" class="container h-75"  style="border: solid 1px blue"></canvas><br />
  <button onclick="zoomin()" class="btn btn-dark">+</button>
  <button onclick="zoomout()" class="btn btn-dark">-</button>
  <button onclick="moveleft()" class="btn btn-dark"><-</button>
  <button onclick="moveright()" class="btn btn-dark">-></button>
</body>
</html>

编辑：我找到了更好的平移问题解决方案，请选中this question，它是可接受的答案。

画布：缩放和平移

2 个答案: