Javascript 在画布上拖动图像

我试图在画布上拖动一个图像，但在这样做的过程中，我遇到了一个问题，即一旦图像处于负坐标，我就会得到一个条件，在该条件下

mouseX - negativeImageCoords // 200 - minus 210 = 410

让我的图像像画布上的爆米花小猫一样跳跃，而不是想要的效果

这是我的代码，我希望这是件愚蠢的事情，我可以把这归因于我太累了

function (e) {
    var
        // The mouse x and y positions
        mx = e.offsetX,
        my = e.offsetY,

        // The last known position
        lx = cache.lx, // These are from a JSON object
        ly = cache.ly; 

    // The temporary image
    var img = $('#loadedImage');

    // Get the image context
    var canvas_context = this.mask(); 

    cache.lx = (mx - lx);
    cache.ly = (my - ly);

    console.log(mx, lx);
    console.log(my, ly);        

    // Redraw
    canvas_context.drawImage(img.get(0), cache.lx, cache.ly, img.width(), img.height());
}

这是面具功能（包括在罪犯的情况下）

function () {
    var mask_name = 'circle';
    var context = ctx.context();
    var mask;
    var isSameMask = false;
    var composition = 'lighter';

    // Add a check to see if it's the same mask
    if (cache.mask && cache.mask.src) {
        if (cache.mask.src !== 'images/masks/' + mask_name + '.png') {
            isSameMask = false;
        }
    }

    // If we don't have a cached mask, load it and cache it
    if (!cache.mask && !isSameMask) {
        // Create a new mask
        mask = new Image;

        // Draw when its loaded
        mask.onload = function () {
            //ctx.clear();
            context.drawImage(this, 0, 0);
            context.globalCompositeOperation = composition;
        };

        mask.src = 'images/masks/' + mask_name + '.png';
        // Set the cache as this new mask
        cache.mask = mask;

        imageEvents.size(0);
    } else {
        ctx.clear();
        // It's cached, so just redraw it
        context.drawImage(cache.mask, 0, 0);
        context.globalCompositeOperation = composition;
    }

    return context;
}

为什么图像会跳来跳去

---

需要注意的是，我为一个appjs项目提供了这些信息，非常感谢大家的任何帮助/建议。

如果没有看到代码的运行，很难给出答案，但可能是您指定的条件，例如：

if (lx < 0) {
    cache.lx = (mx + lx);
} else {
    cache.lx = (mx - lx);
}

---

缓存差异或求和只会增加混乱（如果我理解您的意图，请再说一遍）。

正确，成功地实现了这一点。修复程序正在更新mousedown上的缓存图像位置，并将缓存位置添加到鼠标位置。代码如下：

function drag (e) { // :void
    var
        // The mouse x and y positions
        mx = e.offsetX,
        my = e.offsetY,

        // The last known position
        lx = mx+cache.lx,
        ly = my+cache.ly;

    // The temporary image
    var img = $('#loadedImage');

    // Get the image context
    var canvas_context = this.mask();

    cache.ix = lx;
    cache.iy = ly;

    // Redraw
    canvas_context.drawImage(img.get(0), lx, ly, img.width(), img.height());
    textEvents.draw();
}

还有我的失败事件

    cache.ix = 0;
    cache.iy = 0;

    // Listen for a mousedown or touchstart event
    canvas.on('mousedown touchstart', function (e) {
        cache.lx = cache.ix - e.offsetX;
        cache.ly = cache.iy - e.offsetY;
        // Add a move listener
        canvas.on('mousemove touchmove', function (e) {
            that.drag.call(that, e);
        });
    });

---

我已经尝试过不修改数学，这只是一个绝望的尝试，并阻止它跳跃。在我的答案中添加了更多的内容，以防有帮助。缓存只存储最后知道的位置（l=last，lx，ly），因此使用mx不会移动图像，图像需要能够延伸出画布的边缘（因此是负位置）但是一旦它进入这些数字，双负数就产生了一个正数，当你拖动它时，它会在正负坐标之间跳跃。谢谢，伙计：）一旦它允许，我会在6小时内完成

    cache.ix = 0;
    cache.iy = 0;

    // Listen for a mousedown or touchstart event
    canvas.on('mousedown touchstart', function (e) {
        cache.lx = cache.ix - e.offsetX;
        cache.ly = cache.iy - e.offsetY;
        // Add a move listener
        canvas.on('mousemove touchmove', function (e) {
            that.drag.call(that, e);
        });
    });