拉斐尔自定义属性（Arc）导致变形的圆圈

我正在为使用拉斐尔平滑图形的jQuery提供进度条插件。拉斐尔自定义属性（Arc）导致变形的圆圈

我试图转换由this Raphael example (polar clock)提供的属性功能。

问题是，起初我没有注意到拉斐尔的例子也有变形错误。相对较大的圆圈可以缓解它。看着小一些的，这是显而易见的。

是的，我已经基本上复制粘贴功能一些小的调整，但最终的结果运动相同的错误。

我已成立了一个JSBin在那里我已经添加参考圆我的情景，让当场的问题，它更容易：http://jsbin.com/ekovir/1

如何调整ARC功能绘制真圆？

来源

2012-09-07 jolt

我发现是什么导致圆形变形。

我用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 - converting pie graph to donut graph + http://raphaeljs.com/polar-clock.html

这里我设置了一个例子，看看吧在行动：http://jsbin.com/erusos/1

仍然有一个未回答的问题：在Chrome中，它是CSS渲染器，它不是完整的圆形，或者它是SVG？

享受！

来源

2012-09-12 10:20:40 jolt

我认为这是Chrome的SVG渲染实现中的一个错误。至少在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))，否则中心可能会稍微移动一点。

作为一种解决方法，我建议为进度条创建一组细分，然后在工作完成时更改其颜色，而不是在旧的细节上绘制新的细分。这在任何浏览器中都应该看起来不错，如果没有对比的背景圈，我不认为这些缺陷很容易被发现。

来源

2012-09-07 09:57:23 Qnan

拉斐尔自定义属性（Arc）导致变形的圆圈

回答

相关问题