用鼠标在画布上移动图像 [英] Moving image in canvas with mouse

问题描述

我有这个画布，我使用2张图片，一张是主图片，第二张图片用作剪贴蒙版。

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

任何想法如何解决？

这是一个小提琴： http://jsfiddle.net/rVx5G/10/

推荐答案

看起来你需要在鼠标移动中处理delta而不是相对于窗口移动。这是 jsfiddle 。更改为：

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

这实现了你想要的吗？

这篇关于用鼠标在画布上移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！