d3.js手绘

Question

我有一个包含各种图像的SVG，它都连接到D3.js的缩放功能。因此，当我缩放时，所有的图像都会相应地缩放。我的下一步是添加绘图(手绘)功能。当我在使用D3.js之前创建它的时候，我只是使用一个html画布并在上面绘图。然而，它似乎并不想很好地使用d3.js。我不能在svg中使用相同的画布绘制方法，因为我的其他图像在svg中。从本质上说，我希望能够手绘，以便这个“手绘画布”将与SVG内的图像缩放。1- d3.js是否包含任何类型的手绘库功能？你能给我指出正确的方向吗? 2-如果没有，有没有其他方法可以让画布和svg一起缩放呢？

编辑

这里我们尝试使用d3.js来缩放画布(第一部分是我用来缩放SVG的)

/SVG缩放

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 + ")");

}

/Canvas缩放(不工作)

 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示例。在d3的事件系统中，看看zoom是如何使用canvas.scale的。

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