Geek asks and answers

Moving an image in a canvas with the mouse

I have this canvas, where I use 2 images, one of them is the main image, and the second image is used as a clipping mask.

I need to be able to move the main drawing and have the code already implemented, but when we click on the image to drag, the image always takes its initial position, and when we drag the image, it does not move along with the mouse, there is some kind of increasing delay. I tried to get around this, but I'm not so good with math to come up with the right formula.

This is the code I use to capture the mouse:

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

Any idea how this can be solved?

Here is the fiddle: http://jsfiddle.net/rVx5G/10/

+3
2

, , . 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;
    }
});

, ?

+7

,

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

More articles:


All Articles