0

我已经制作了一条弧线，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);

我已经完成的一种方法是我可以掩盖直线的直角部分，但是我宁愿没有这个并且只拥有一次漂亮的曲线，而不是同时管理当前路径和顶部的掩码。

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

4

2 回答 2

2

试试这个。只需从 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

于 2013-01-03T15:09:26.430 回答
1

您可以扩展Raphael对象以包含arc函数。

弧计算已从 Raphael 的“极地时钟”演示中修改：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);​
于 2013-01-03T16:08:23.000 回答