拖动问题与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/

采取

逻辑