使用SVG曲线模拟圆角 [英] Using SVG curves to imitate rounded corners
本文介绍了使用SVG曲线模拟圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一系列向后的形状--使用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>
我想给这些形状半径约为5的圆角。我是否必须手动将水平线绘制到距离其目标位置差5px,然后编程沿PI/2弧度向上绘制一条曲线,然后绘制垂直线的其余部分?
我希望有一种方法可以用一条小半径的SVG曲线来实现这一点,这样形状就会沿着一条直线前进,直到它的末端,然后向上弯曲--这与Raphael或CSS3中圆角矩形的行为完全相同。
我已检查SVG path guidelines,但在处理详细信息时遇到困难。
谢谢!
推荐答案
这应该会起作用(至少在示例中是这样):
更改此设置
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。希望这能有一点帮助。
顺便说一句,我假设速记相对三次曲线是最适合您的情况的曲线类型。
这篇关于使用SVG曲线模拟圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文