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＆lt; x＆lt; 0的窗口，但是在连续拖动之后您的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/

使用d3.js拖动问题

1 个答案: