CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
BeoWulf
BeoWulf

Reputation: 657

Moving image in canvas with mouse

I have this canvas where I use 2 pictures, one is the main picture and the second picture is used as a clipping mask.

I need to be able to move the main picture and have the code already implemented, but when we click in the picture to drag, the image always assumes the initial position, and also when we drag the image it doesn't move along with the mouse, there's some kind of increasing delay. I tried to turn around this, but I'm not that good with math to come up with the right formula.

This is the code I use to capture the mouse moving:

$(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 can this be solved?

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

Upvotes: 3

Views: 8559

Answers (2)

Alper AKPINAR
Alper AKPINAR

Reputation: 91

Change this line like below for auto size

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

Upvotes: 0

acarlon
acarlon

Reputation: 17282

It looks like you need to handle the delta in mouse movements instead of moving relative to window. Here is a jsfiddle. The change is: 

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

Does that achieve what you wanted?

Upvotes: 8

Related Questions