拖動問題與d3.js

Question

嗨如果有人可以幫助我，這將是偉大的。我做了一個縮放鍋d3.js這是工作的罰款：

function zoom() { 

    var e = d3.event 
    var scale = d3.event.scale; 

    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(e.translate[0], e.translate[1]); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 

} 

那麼我想只畫布區域內的圖像，我做了這樣的：

function zoom() { 
    var scale = d3.event.scale; 
    var e = d3.event, 
     tx = Math.min(0, Math.max(e.translate[0], width - imgBG.width * e.scale)), 
     ty = Math.min(0, Math.max(e.translate[1], height - imgBG.height * e.scale)) 

    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(tx, ty); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 
} 

這裏是一個工作代碼：https://jsfiddle.net/ux7gbedj/

問題是：例如，當小提琴被加載，我開始從左到右拖動，讓說2次，圖像不移動這是很好，但然後當我嘗試從右向左拖動我必須至少拖動3次才能開始移動ag ain，所以我認爲我沒有做一些非常正確的事情。

Answer 1

您需要將受限制的翻譯座標（tx，ty）反饋回縮放行爲對象，否則d3.event翻譯座標是無界的，最終您會發現圖像粘在其中一個角落/邊上。即，您將試圖將圖像拖動到最小/最大值的情況下拖動到某個窗口，但在連續拖動後，您的translate.x座標可能爲-600。即使您將50個像素拖回到-550，圖像也不會移動，因爲它會將代碼中的max（）設置爲-200。從http://bl.ocks.org/mbostock/4987520

... 
// declare the zoom behaviour separately so you can reference it later 
var zoomObj = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom); 
var canvas = d3.select("canvas") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoomObj) 
    .node().getContext("2d"); 

function zoom() { 
    var scale = d3.event.scale; 
    var e = d3.event, 
      tx = Math.min (0, Math.max(e.translate[0], width - imgBG.width * e.scale)), 
      ty = Math.min(0, Math.max(e.translate[1], height - imgBG.height * e.scale)); 

    zoomObj.translate([tx,ty]); // THIS 
    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(tx, ty); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 
} 
... 

https://jsfiddle.net/ux7gbedj/1/

採取

邏輯