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次才能再次开始移动，所以我认为我做的事情不是很正确。

Answer 1

你需要将受限的平移坐标(tx，ty)反馈给缩放行为对象，否则d3.event平移坐标是无界的，最终你会发现图像在一个角/边。也就是说，你将试图用你的最小/最大值限制图像拖动到一个-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/