使用鼠标在画布中移动图像

Question

我有一个画布，在这个画布中我使用了两张图片，第一张是主图像，第二张用作裁剪遮罩。

我需要能够移动主要的图片，并且已经实现了代码，但是当我们点击图片拖动时，图片总是保持初始位置，而且当我们拖动图片时，它不会随着鼠标移动，会出现一些增加的延迟。我试图解决这个问题，但我并不擅长数学，无法得出正确的公式。

这是我用来捕获鼠标移动的代码：

$(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();
    }
});

有没有任何想法如何解决这个问题？这里有一个 fiddle: http://jsfiddle.net/rVx5G/10/。

- BeoWulf

Answer 1

看起来您需要处理鼠标移动的增量而不是相对于窗口移动。这是一个 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;
    }
});

这是否达到了您想要的效果？

- acarlon

---

是的。非常感谢！ - BeoWulf

Answer 2

将此行更改为以下内容以进行自动调整大小

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();
....

- Alper AKPINAR