Question

我正试图在我的画布上拖动图像但是这样做我有一个问题，一旦图像处于负坐标我得到一个条件，其中

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项目中，非常感谢大家提供的任何帮助/建议。

Answer 1

是的，设法让这个工作。该修复程序更新了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);
        });
    });

Answer 2

如果没有看到代码在行动中，很难提供答案，但可能是您指定的条件，例如：

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

如果lx小于或等于0，您肯定不想更改总和。让数学完成它的工作。在数学上：

mx + -1与mx - 1

相同

mx + +1与mx + 1

相同

mx - -1与mx + 1 [双重否定]

相同

这就是'200 - 减去210 = 410'的原因;这实际上是正确的。

修改

变量lx是缓存（因此旧）的位置; mx是新职位。

因此lx - mx将返回缓存位置和新位置之间的差异，我认为（如果我理解正确的话）是您要将图像移动一定量的内容。与ly - my相同。

当谈到缓存新的鼠标位置时，你当然只想缓存当前的位置，例如

cache.lx = mx; // current position cached for future reference

缓存差异或总结只会增加混乱（再次，如果我已经理解你要做的事情）。

拖动画布上的图像闪烁

2 个答案: