把矩形的两端削成矛状

Chipping the ends of rectangle to make them spear-like

本文关键字：      更新时间：2023-09-26

我想用d3.js芯片/修改矩形元素的末端，使它们看起来像长矛(想象它的一个末端看起来像三角形)。目前，我通过添加适当旋转的triangle-up符号来实现此效果，并附加到矩形的末尾。我寻找其他解决办法，但没有找到。

我该如何着手解决这个问题?

嗨，你可以使用路径来生成你的三角形或尖位。

var lineData = [ { "x": 50,   "y": 150},// Left pointy bit
             { "x": 100,  "y": 100},// top left
             { "x": 300,  "y": 100},// top right
             { "x": 350,  "y": 150},// right pointy bit
             { "x": 300,  "y": 200},// bottom right
             { "x": 100,  "y": 200},// bottom left
             { "x": 50,   "y": 150}];// Back to left pointy bit
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
d3.select("svg")
.append("path")
.attr("stroke", "#333")
.attr("stroke-width", 1.2)
.attr("opacity", 0.5)
.attr("fill", "CadetBlue")
.attr("d", lineFunction(lineData));

下面是一个关于js fiddle的例子:

http://jsfiddle.net/Dyna8/

相关文章：
  • 没有找到相关文章