gpt4 book ai didi

svg - 使用SVG曲线模仿圆角

转载 作者:行者123 更新时间:2023-12-04 05:20:52 25 4
gpt4 key购买 nike

我用 SVG 路径符号在 Raphael 中绘制了一系列向后的“L”形状——只是一组数据点,每个数据点由一条水平线和一条垂直线表示,长度不同。

<div id="canvas"></div>​
<script>
var data = [
[{x: 32, y: 207}, {x: 50, y: 371}],
[{x: 34, y: 209}, {x: 39, y: 34}],
[{x: 32, y: 216}, {x: 58, y: 38}],
[{x: 70, y: 221}, {x: 93, y: 40}],
[{x: 89, y: 223}, {x: 105, y: 41}],
[{x: 113, y: 225}, {x: 150, y: 42}],
[{x: 132, y: 228}, {x: 173, y: 43}],
[{x: 305, y: 230}, {x: 354, y: 45}]
],
paper = Raphael("canvas", 400, 300),
path;

for (var c = 0; c < data.length; c += 1) {
path = "M" + data[c][0].x + "," + data[c][0].y;
path += "H" + data[c][1].x;
path += "V" + data[c][2].y;
paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
}
</script>

jsFiddle

我想给这些形状提供半径为 5 左右的圆角。我是否必须手动将水平线绘制到距离其目的地 5px 的位置,然后绘制一条向上 PI/2 弧度的曲线,然后绘制其余的垂直线?

我希望有一种方法可以用一个小半径的单个 SVG 曲线来做到这一点,这样形状就会直线前进,直到它结束前不久,然后向上弯曲——这正是拉斐尔中圆角矩形的行为或CSS3。

我检查了 SVG path guidelines但我很难处理细节。

谢谢!

最佳答案

这应该可以解决问题(至少在示例情况下):

http://jsfiddle.net/jYGrq/3/

改变这个

path += "H" + (data[c][1].x)

对此:
path += "H" + (data[c][1].x-5) ;

并在其后添加这些行:
if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";

这涵盖了示例中的所有情况,但是如果您想在不考虑方向的情况下圆角,请制作更多的 if。希望这会有所帮助。

顺便说一下,我假设速记相对立方 (s) 是最适合您的情况的曲线类型。

关于svg - 使用SVG曲线模仿圆角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13709413/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com