d3.js的拖拽问题

Drag issue with d3.js

本文关键字：问题 js d3      更新时间：2023-09-26

嗨，如果有人能帮助我这将是伟大的。我用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次才能再次开始移动，所以我认为我没有做一些非常正确的事情。

您需要将受限的平移坐标(tx, ty)馈送回缩放行为对象，否则d3。事件平移坐标是无界的，最终你会发现图像粘在一个角落/边。也就是说，你会试图限制图像拖动到一个窗口，说-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/

相关文章：