背景
我渲染了很多元素,所以我在画布上使用d3,而不是SVG。
This lovely block from @mbostock describes how to zoom the canvas on mouse scroll in d3v4。然而,我喜欢在鼠标滚动上平移,而不是缩放(就像普通网页和this block一样)。
有一个couple folks已经知道如何使用d3和SVG在滚动上进行平移。不幸的是,这些答案对于canvas来说不是开箱即用的。
代码
canvas.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
..。稍后..。
function zoomed() {
context.save();
context.clearRect(0, 0, w, h);
// this gives the default zooming and panning behavior in canvas:
context.translate(d3.event.transform.x, d3.event.transform.y);
context.scale(d3.event.transform.k, d3.event.transform.k);
// Instead, something like this might work?:
current_translate = d3....?
new_translate = {'x': current_translate.x + d3.event.sourceEvent.wheelDeltaX,
'y': current_translate.y + d3.event.sourceEvent.wheelDeltaY};
context.translate(new_translate.x, new_translate.y);
drawCanvas();
context.restore();
}
或者,我可能根本不应该使用d3.zoom
。应该是类似这样的东西:
canvas.call(d3.pan() // ??
.on("zoom", pan));
我能想到的最后一种选择是,我不应该为滚动行为设置javascript处理程序,而是只设置一个比window.innerHeight
大的画布元素。也许浏览器会帮我解决这个问题呢?(尝试这种天真的方式对我不起作用,所以如果这是最好的选择,我希望能得到一些帮助)。
https://stackoverflow.com/questions/50777762
复制相似问题