在具有多个图像的 HTML5 画布上实现平移/缩放答案

【问题标题】：Implementing Pan/Zoom on a HTML5 Canvas with multiple images在具有多个图像的 HTML5 画布上实现平移/缩放
【发布时间】：2014-04-15 23:28:46
【问题描述】：

我正在开发一个网站，用户可以在该网站上上传图像，然后对其应用不同的效果（蒙版、文本等）。这是在 HTML 中调用 canvas 元素的方式：

<div>
   <div onload="draw();">
      <canvas id="canvas" data-girar="0">
          <div style="display:none;">
              <img onload="draw()" id="imgDisp" src="">
              <img id="maskDisp" src="">
          </div>
      </canvas>
    </div>
    <div id="text_content"></div>
</div>

这两个图像彼此重叠，“text_content” div 也是如此。我想实现一个简单的平移/缩放功能，以便它们一起移动。有没有办法做到这一点？提前致谢。另外，这里是 draw();功能：

function draw() {

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var newImg = document.getElementById('imgDisp');
var newMsk = document.getElementById('maskDisp');
var viewpanel = document.getElementById('view_panel');
var textcontent = document.getElementById('text_content');
document.getElementById("text_content").innerHTML = "";

canvas.width = 700;
canvas.height = 700;


if (newImg.height > 750 && newImg.width > 750){
    viewpanel.width = newImg.width/2;
    viewpanel.height = newImg.height/2;
    textcontent.style.height = "700px";
    textcontent.style.width = "700px";
    // Draw image
    ctx.drawImage(document.getElementById('imgDisp'),0,0,newImg.width/1.3,newImg.height/1.74);
    // Draw frame
    ctx.drawImage(document.getElementById('maskDisp'),0,0,newMsk.width/1.3,newMsk.height/1.74);
    text_size('1')
}
else if (newImg.height < 500 && newImg.width < 500){{}

    viewpanel.width = newImg.width;
    viewpanel.height = newImg.height;
    canvas.height = 240;
    canvas.width = 240;
    textcontent.style.height = "240px";
    textcontent.style.width = "240px";
    // Draw image
    ctx.drawImage(document.getElementById('imgDisp'),0,0,newImg.width*2,newImg.height*2);
    // Draw frame
    ctx.drawImage(document.getElementById('maskDisp'),0,0,newMsk.width*2,newMsk.height*2);
    text_size('2')
}

}

【问题讨论】：

您的问题在哪里？目前，这更像是一个陈述而不是一个问题。
@Jasper 我的问题是：如何在我的画布中实现一个简单的平移/缩放功能？
你不可能得到太多帮助，因为这是措辞，因为看起来你什么都没试过。 SO上已经有几个这样的问题，如果你使用搜索引擎，你会发现大量的信息。

标签： javascript jquery canvas

【解决方案1】：

这是我制作的绘画应用程序的一部分的副本/粘贴。用户设置缩放级别（“缩放”的输入 id）并用于所有计算。无论缩放百分比是什么，您都想反转它（1/n），因为我的标签是 %，所以我使用 100/n。我的应用程序的平移功能来自外部 div overflow: auto。此外，我没有在画布内放置任何元素；画布有一个背景图像，而绘图是可以保存为单独的 png 图像的叠加层。我不确定这会对您的情况产生什么影响。

$('canvas').mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);
});

【讨论】：