javascript - 画一个漂亮整齐的弧线，没有大的直 Angular ，而是有漂亮的 Angular

Question

我在Raphael中画了一条弧线，我的目标只是一条弧线，没有 其中有一个大直 Angular 。

所以只有一条没有直 Angular 的平滑曲线。

它非常基本，使用拉斐尔椭圆弧。

您可以在 http://jsfiddle.net/mailrox/uuAjV/1/ 看到它

代码如下:

    var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad),
  "z"
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

我所做的一种方法是我可以屏蔽线条的直 Angular 部分，但是我不想这样做，而只是拥有一次漂亮的曲线，而不是同时管理当前路径和顶部的 mask 。

非常感谢您的帮助!

Answer 1

试试这个。只需从 SVG 路径定义中取出闭合路径(“z”)即可(注意我没有测试此解决方案):

var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad)
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

jsFiddle