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

正しく、これを機能させることができました。修正は、マウスダウン時にキャッシュされた画像の位置を更新し、キャッシュされた位置をマウスの位置に追加するだけでした。コードは次のとおりです。

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 - -1mx + 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 に答える