用鼠标在画布上移动图像

时间:2014-02-24 21:46:26

标签: javascript jquery html5 html5-canvas

我有这个画布,我使用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/

2 个答案:

答案 0 :(得分:7)

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

这可以实现你想要的吗?

答案 1 :(得分:0)

如下所示更改此行以获取自动尺寸

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