用鼠標在畫布上移動圖像

Question

我有這個畫布，我使用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/

Answer 1

看起來你需要在鼠標移動中處理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;
    }
});

這實現了你想要的嗎？

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