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();

}

然后我想只在 canvas 区域内显示图像，我是这样做的：

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/

问题是：例如，当加载 fiddle 时，我开始从左向右拖动，比方说 2 次，图像没有移动，这很好，但是当我尝试从右向左拖动我必须至少拖动 3 次才能再次开始移动，所以我认为我做的不是很正确。

Answer 1

您需要将受限的平移坐标 (tx, ty) 反馈给缩放行为对象，否则 d3.event 平移坐标是无界的，最终您会发现图像停留在 corners/sides。也就是说，您将尝试使用 min/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/

d3.js 的拖动问题

Drag issue with d3.js

javascript

canvas

image

drag

d3.js