您好,如果有人可以帮助我,那就太好了。我用 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 次才能再次开始移动,所以我认为我做的事情不是很正确。
最佳答案
您需要将受限的平移坐标 (tx, ty) 反馈回缩放行为对象,否则 d3.event 平移坐标是无界的,最终您会发现图像停留在其中一个 Angular/边上。也就是说,您将尝试使用最小值/最大值将图像拖动限制在 -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();
}
...
关于javascript - d3.js 的拖动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39691239/