Question

我在Raphael制作了一个圆弧，我的目标只是一个圆弧它的大角度。

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

这是非常基本的，并使用拉斐尔椭圆弧。

您可以在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);

我做过的一种方法是我可以屏蔽线条的直角部分，但是我宁愿没有这个，只是有一个很好的曲线，反对管理当前路径和顶部的掩模。

非常感谢一些帮助，谢谢！

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

Answer 2

您可以扩展Raphael对象以包含arc功能。

弧形计算已经从拉斐尔的“极地时钟”演示中进行了修改：http://raphaeljs.com/polar-clock.html

演示：http://jsfiddle.net/TmVHq/

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

画出一个漂亮整洁的弧形，没有大的直角，而是有很好的角落

2 个答案: