Question

我有一个SVG，其中包含各种图像，它都与d3.js的缩放功能相连。因此，当我缩放所有图像时，将相应地缩放。我的下一步是为此添加绘图（手绘）功能。当我在使用D3.js之前创建它时，我只是使用一个html画布并绘制它。但是，它似乎并不想与d3.js很好地配合。我无法在我的其他图像所在的svg中使用相同的画布绘制方法。基本上我希望能够手绘，以便这个手绘的画布＆＃39;将使用SVG内的图像进行缩放。 1- d3.js是否包含任何类型的手绘图库功能？你能为我指出正确的方向吗？ 2-如果没有，是否还有其他方法可以将画布和svg相互缩放？

修改

继续尝试使用d3.js来缩放画布（第一部分是我用来缩放SVG的内容）

/// SVG ZOOM

var zoom = d3.behavior.zoom().scaleExtent([.75, 2.0]).on("zoom", zoom);

 d3.select("#mysvg").call(zoom).on('mousedown.zoom',null);


function zoom() {

d3.select("#mapImages").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

}

////画布缩放（不工作）

 var canvas = d3.behavior.zoom().scaleExtent([.75, 2.0]).on("zoom", canvasZoom);

d3.select("#canvasDiv").call(canvas).on('mousedown.zoom',null);

function canvasZoom() {

  d3.select("#mycanvas").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

我查看了这个d3示例。使用canvas.scale，使用d3的事件系统来解决缩放问题。

http://bl.ocks.org/mbostock/3680958

d3.js自由手绘

1 个答案: