Javascript 画一个漂亮整洁的弧线，没有巨大的直角，而是有漂亮的角

我在《拉斐尔》（Raphael）中画了一个弧线，我的目标只是一个弧线，没有一个弧线 大直角

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

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

你可以在

代码如下：

    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);

我所做的一种方法是，我可以遮罩线的直角部分，但是我不希望有这个，只希望有一条漂亮的曲线，而不是管理当前路径和顶部的遮罩

---

非常感谢您的帮助，谢谢

试试这个。只需将关闭路径（“z”）从SVG路径定义中去掉（注意，我没有测试此解决方案）：

---

试试这个。只需将关闭路径（“z”）从SVG路径定义中去掉（注意，我没有测试此解决方案）：

---

您可以扩展

Raphael

对象以包含

弧

函数

arc计算已根据Raphael的“极时钟”演示进行了修改：

演示：

---

您可以扩展

Raphael

对象以包含

arc

函数

arc计算已根据Raphael的“极时钟”演示进行了修改：

演示：

---

这可以消除准直角的水平部分。如果你也不想要垂直部分，只需在第二个path命令中将“l”改为“m”，这样你就可以跳到12点钟，而不是从中心画一条线。这样可以消除准直角的水平部分。如果您也不想要垂直部分，只需在第二个path命令中将“l”更改为“m”，这样您就可以跳到12点钟，而不是从中心画一条线。

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);

Raphael.fn.arc = function(cx, cy, value, total, radius) {
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = cx + radius * Math.cos(a),
        y = cy - radius * Math.sin(a),
        path;

    if (total === value) {
        path = [['M', cx, cy - radius], ['A', radius, radius, 0, 1, 1, (cx - 0.01), cy - radius]];
    } else {
        path = [['M', cx, cy - radius], ['A', radius, radius, 0, +(alpha > 180), 1, x, y]];
    }

    return this.path(path);
}

var Paper = new Raphael('canvas', 300, 300);
var arc = Paper.arc(150, 150, 270, 360, 100);
arc.attr('stroke-width', 15);​