拖動畫布上閃爍

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' ;這實際上是正確的。

EDIT

可變lx是緩存的（因此舊）的位置; mx是新的職位。

因此，lx - mx將返回緩存位置和新位置之間的差異，我認爲（如果我正確理解您的話）是您想要將圖像移動一定的數量。 ly - my一樣。

當談到緩存新的鼠標位置時，當然你只想緩存當前的位置，

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

緩存差異或求和只會增加混淆（再次，如果我已經理解你想做什麼）。