0

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

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

4

2 回答 2

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);
        });
    });
于 2013-02-01T14:18:02.487 回答
0

如果没有看到实际的代码，很难提供答案，但可能是您指定的那些条件，例如：

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

缓存差异或求和只会增加混乱（再次，如果我理解你想要做什么）。

于 2013-01-31T16:32:30.157 回答