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

Draw a nice neat arc without the massive right angle and have nice corners instead

本文关键字：漂亮 一个      更新时间：2023-09-26

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

我所做的一种方法是，我可以屏蔽掉直线的直角部分，但我不想这样做，只需要一个漂亮的曲线，而不是同时管理当前路径和顶部的蒙版。

真的很感谢你的帮助，谢谢!

试试这个。只需将关闭路径('z')从SVG路径定义中删除(注意我没有测试此解决方案):

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

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

圆弧计算已修改自Raphael的'Polar clock'演示: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);​
相关文章：