[英]Moving image in canvas with mouse
我有这个画布,我使用2张图片,一张是主图片,第二张图片用作剪贴蒙版。
我需要能够移动主画面并且已经实现了代码,但是当我们点击图片进行拖动时,图像总是呈现初始位置,而且当我们拖动图像时它也不会随着图像一起移动鼠标,有一些增加的延迟。 我试图扭转这种局面,但是我对数学提出正确的公式并不是那么好。
这是我用来捕捉鼠标移动的代码:
$(window).mousemove(function(event) {
if( isDragging == true )
{
var cWidth = $("#stcanvas").width();
moveXAmount = (event.pageX / $(window).width())*cWidth;
moveXAmount = moveXAmount - (cWidth/2);
var cHeight = $("#stcanvas").height();
moveYAmount = (event.pageY / $(window).height())*cHeight;
moveYAmount = moveYAmount - (cHeight/2);
buildcanvas();
}
});
知道如何解决这个问题?
这是一个小提琴: http : //jsfiddle.net/rVx5G/10/
看起来你需要在鼠标移动中处理delta而不是相对于窗口移动。 这是一个jsfiddle 。 变化是:
var prevX = 0;
var prevY = 0;
$(window).mousemove(function(event) {
if( isDragging == true )
{
if( prevX>0 || prevY>0)
{
moveXAmount += event.pageX - prevX;
moveYAmount += event.pageY - prevY;
buildcanvas();
}
prevX = event.pageX;
prevY = event.pageY;
}
});
这实现了你想要的吗?
如下所示更改此行以获取自动尺寸
ctx.clearRect(0,0, mask_image.width , mask_image.height );
function make_pic(ctx) {
// Mask for clipping
mask_image = new Image();
mask_image.src = 'mask.png';
ctx.clearRect(0, 0, mask_image.width, mask_image.height);
ctx.drawImage(mask_image, 0, 0);
ctx.save();
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.