拉斐爾自定義屬性（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）導致變形的圓圈

回答

相關問題