我正在尝试制作一个工具来绘制任意图形,如本例所示 - 线条绘制,但使用路径本身与fill
- 而不是stroke
。这是我已经做的 - https://jsfiddle.net/zeleniy/b14paam2/。示例已包含单个任意路径图,但您可以使用拖动自行绘制。
如您所见,有两个麻烦:
-
笔尖倾斜,我不知道为什么。因此,当从右上角到左下角绘制对角线时,反之亦然,路径几乎不可见。
-
在路径与自身相交的地方,填充不存在。
如何解决这个问题?
你可以用线代替面积,它更适合画笔。
var path;
var area = d3.svg.line()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; })
.tension(0)
.interpolate("basis");
var svg = d3.select("svg")
.call(d3.behavior.drag()
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended));
function dragstarted() {
path = svg.append("path").datum([]).attr("class", "line")
.attr({
"fill": "none",
"stroke": "lightblue",
"stroke-width": 25 + "px",
"stroke-linejoin": "round"
});
}
function dragged() {
path.datum().push(d3.mouse(this));
path.attr("d", area);
}
function dragended() {
path = null;
}
svg {
border: 2px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<h2>Paint with brush</h2>
<svg width="100%" height="300px"></svg>