Raphael自定义属性（弧形）导致圆形变形

Question

我正在为jQuery开发进度条插件，利用Raphael实现平滑图形。

我试图转换此Raphael示例(polar clock)提供的属性函数。问题是，一开始我没有注意到Raphael示例中也存在变形错误。相对较大的圆只是减轻了它。看小圆，就会注意到它。

是的，我基本上复制并粘贴了该函数，并进行了一些微小的调整，但最终结果仍然存在相同的错误。

我设置了一个JSBin，向我的场景添加了参考圆，以便更容易地发现问题：http://jsbin.com/ekovir/1 如何调整Arc函数以绘制正确的圆？

- tomsseisums

Answer 1

我认为这是Chrome的SVG渲染实现中的一个bug。至少在FireFox和Safari中，它看起来要好得多。

此外，在选择弧形点时，我认为最好使用(center.x + radius * cos(a-0.01), center.y + radius * sin(a-0.01))，而不是(center.x + radius * cos(a) - 0.01, center.y + radius * sin(a))，否则中心可能会稍微偏移一些。

作为解决方法，我建议创建一个进度条的一组线段，然后随着工作的完成而改变它们的颜色，而不是在旧的线段上绘制新的线段。这应该在任何浏览器中都很好看，而且我认为这些缺陷很难在没有对比背景圆的情况下被发现。

- Qnan

Answer 2

我已经找到了导致圆形变形的原因。

我使用了stroke-width来设置圆形的“粗细”/“帽子”，它越大，它就越容易变形。

至少，这是我的观察结果，技术上也可能是由其他原因引起的。

无论如何，为了得到正确的甜甜圈，我最终采用了这种方法：

/**
 * Donut circle drawing
 *
 * @param  integer  start       Percentage to start with
 * @param  float    diameter
 * @param  float    fat         How fat should the circle bar be
 * @return object
 */
var fatDonutArc = function (start, diameter, fat)
{
    var center = diameter / 2;
    var outerRadius = center;
    var innerRadius = center - fat; // subtract fat

    var alpha = 360 / 100 * start;
    var a = (90 - alpha) * Math.PI / -180; // -180 starts to draw from 12 o'clock

    // calculate outer ring point coordinates
    var outerX = center + outerRadius * Math.cos(a);
    var outerY = center + outerRadius * Math.sin(a);

    // calculate inner ring point coordinates
    var innerX = center + innerRadius * Math.cos(a);
    var innerY = center + innerRadius * Math.sin(a);

    // path cache
    var path;

    if (start !== 100)
    {
        path = [
            // move to start point of inner ring
            [
                "M",
                center,
                center - innerRadius
            ],

            // draw a line to outer ring
            [
                "L",
                center,
                center - outerRadius
            ],

            // arc to outer ring end
            [
                "A",
                outerRadius,
                outerRadius,
                0,
                +(alpha > 180),
                1,
                outerX,
                outerY
            ],

            // move to inner ring end
            [
                "L",
                innerX,
                innerY
            ],

            // arc to inner ring start
            [
                "A",
                innerRadius,
                innerRadius,
                0,
                +(alpha > 180),
                0,
                center,
                center - innerRadius
            ]
        ];
    }
    else
    {
        path = [
            // move to outer ring start
            [
                "M",
                center,
                center - outerRadius
            ],

            // arc around the clock
            [
                "A",
                outerRadius,
                outerRadius,
                0,
                +(alpha > 180),
                1,
                outerX - .1, // subtract, otherwise the path becomes "reset"
                outerY
            ],

            // connect
            [
                "z"
            ],

            // move to inner circle start
            [
                "M",
                innerX,
                innerY
            ],

            // arc around the clock
            [
                "A",
                innerRadius,
                innerRadius,
                0,
                +(alpha > 180),
                0,
                innerX + .1, // subtract, otherwise the path becomes "reset"
                innerY
            ],

            // and connect
            [
                "z"
            ]
        ];
    }

    return {
        path : path
    };
};

这是一个混搭：raphael.js - 将饼图转换为甜甜圈图 + http://raphaeljs.com/polar-clock.html

我在这里设置了一个示例，可以看到它的实际效果：http://jsbin.com/erusos/1

仍有一个未解答的问题：在Chrome中，是CSS渲染器没有完全将圆形圆角化，还是SVG？

享受吧！

- tomsseisums