d3.js的拖动问题

Question

Hi If someone can help me with this would be great. I did a zoom pan with d3.js which is working fine:

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

}

then I wanted to have the image only inside the canvas area and I did it like this:

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

Here is a the working code: https://jsfiddle.net/ux7gbedj/

The problem is that: for example when the fiddle is loaded and I start dragging from left to right, let say 2 times, the Image is not moving which is fine, but then when I try to drag from right to left I have to drag at least 3 times to start moving again, so I think I am not doing something very correct.

Answer 1

You need to feed the restricted translate coordinates (tx, ty) back into the zoom behaviour object, otherwise the d3.event translate coordinates are unbounded and eventually you'll find the image sticks at one of the corners/sides. ie you'll be trying to restrict the image dragging to a window of say -200<x<0 with your min/max's but your translate.x coordinate could be at -600 after some continuous dragging. Even if you then drag back 50 pixels to -550, the image will not move, as it will max() to -200 in your code.

Logic taken from 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/