[英]Implementing Pan/Zoom on a HTML5 Canvas with multiple images
我在一个网站上工作,用户可以在其中上传图像,然后在图像上应用不同的效果(蒙版,纹理等)。 这是在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')
}
}
这是我制作的部分绘画应用程序的副本/粘贴。 用户设置缩放级别(“缩放”的输入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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.