Javascript 画布：缩放和平移_Javascript_Jquery_Html_Canvas_Html5 Canvas

Javascript 画布：缩放和平移

javascript jquery html canvas html5-canvas

Javascript 画布：缩放和平移,javascript,jquery,html,canvas,html5-canvas,Javascript,Jquery,Html,Canvas,Html5 Canvas,我正在努力使这幅画布画能够放大、缩小和平移它。有一些平移和缩放图像的例子，但我的情况不同，我不知道在我的情况下应该怎么做，因为这不是图像。如果您能给我一些建议或是提供一些图书馆，我将不胜感激 <!DOCTYPE html> <html> <head> <style type="text/css"> canvas{border:#666 1px solid;} </style> <script

我正在努力使这幅画布画能够放大、缩小和平移它。有一些平移和缩放图像的例子，但我的情况不同，我不知道在我的情况下应该怎么做，因为这不是图像。如果您能给我一些建议或是提供一些图书馆，我将不胜感激

<!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>


画布{边框：#666 1px实心；}
window.onload=draw//在DOM就绪时执行draw函数
函数绘图（）{
//将canvas元素分配给变量
var canvas=document.getElementById（'canvas1'）；
//创建html5上下文对象以启用绘图方法
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（150200200,2*Math.PI）；
ctx.fill（）；
ctx.beginPath（）；
ctx.moveTo（150200）；
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（300200）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（300200,20,0,2*Math.PI）；
ctx.fill（）；
ctx.beginPath（）；
ctx.moveTo（300200）；
ctx.lineTo（150200）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（300200）；
ctx.lineTo（225300）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（225300,20,0,2*Math.PI）；
ctx.fill（）；
//填充样式（r、g、b、alpha）
//ctx.fillStyle=“rgba（0200,0,1）”；
//fillRect（X、Y、宽度、高度）
//ctx.fillRect（36,10220120）；
}

这是我正在尝试使其在鼠标光标中放大的图形的屏幕截图：

Panzoom（）表示它基本上支持任何HTMLElement的平移和缩放，包括画布：

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

Panzoom（）表示它基本上支持平移和缩放任何HTMLElement，包括画布：

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

如果您对按钮而不是“拖动平移”没有意见，您可以使用该方法进行平移。您也可以使用方法或以下方法。下面是我在类似情况下使用的，但我使用了按钮：

<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>


window.onload=函数（）{
比例=1；
canvas=document.getElementById（“canvas”）；//替换为画布的id
ctx=canvas.getContext（“2d”）；
翻译（150,75）；
画布（）；
} 
函数drawcanvas（）{
ctx.beginPath（）；
//调用用于绘制必要内容的函数
//..
//..
牵引箭头（ctx）；
ctx.stroke（）；
}
函数clearcanvas（）{
让current_transform=ctx.getTransform（）；
setTransform（1.1,0,0,1.1,0,0）；
clearRect（0，0，canvas.width*比例，canvas.height*比例）；
ctx.setTransform（当前_变换）；
}
函数zoomin（）{
clearcanvas（）；
比例=1.1；
比例尺（比例尺，比例尺）；
画布（）；
}
函数zoomout（）{
clearcanvas（）；
比例=1.0/1.1；
比例尺（比例尺，比例尺）；
画布（）；
}
函数moveleft（）{
clearcanvas（）；
ctx.translate（-10,0）；
画布（）；
}
函数moveright（）{
clearcanvas（）；
ctx.translate（10,0）；
画布（）；
}


+
-

编辑：我找到了更好的平移问题解决方案，请检查并接受答案。

如果您可以使用按钮而不是“拖动平移”，则可以使用该方法进行平移。您也可以使用方法或以下方法。下面是我在类似情况下使用的，但我使用了按钮：

<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>


window.onload=函数（）{
比例=1；
canvas=document.getElementById（“canvas”）；//替换为画布的id
ctx=canvas.getContext（“2d”）；
翻译（150,75）；
画布（）；
} 
函数drawcanvas（）{
ctx.beginPath（）；
//调用用于绘制必要内容的函数
//..
//..
牵引箭头（ctx）；
ctx.stroke（）；
}
函数clearcanvas（）{
让current_transform=ctx.getTransform（）；
setTransform（1.1,0,0,1.1,0,0）；
clearRect（0，0，canvas.width*比例，canvas.height*比例）；
ctx.setTransform（当前_变换）；
}
函数zoomin（）{
clearcanvas（）；
比例=1.1；
比例尺（比例尺，比例尺）；
画布（）；
}
函数zoomout（）{
clearcanvas（）；
比例=1.0/1.1；
比例尺（比例尺，比例尺）；
画布（）；
}
函数moveleft（）{
clearcanvas（）；
ctx.translate（-10,0）；
画布（）；
}
函数moveright（）{
clearcanvas（）；
ctx.translate（10,0）；
画布（）；
}


+
-

编辑：我找到了更好的平移问题解决方案，请检查，这是可接受的答案。

如何在鼠标坐标处缩放如何缩放、平移以及边界约束都使用名为view的对象版本。第二个更详细，适用于任何类型的画布渲染。@Blindman67谢谢，伙计，谢谢！如何在鼠标坐标处缩放如何缩放、平移和边界约束都使用名为view的对象版本。第二个更详细，适用于任何类型的画布渲染。@Blindman67谢谢，伙计，谢谢！