Web Chart 入門（5-3）：draw2d 圖形填充漸變色實現

背景

draw2d 本身未提供直接設置漸變填充的 API，但其底層繪圖引擎 Raphael 支持 SVG 漸變語法，通過在 Figure 的 repaint 方法中設置 attributes.fill 即可實現。

Raphael 漸變語法詳解

線性漸變格式

"angle - color1 [- color2 [:offset]]* - colorN"
例子："90-#fff-#000"          // 90° 從白到黑
     "0-#fff-#f00:20-#000"    // 0° 白→紅(20%)→黑

• angle：漸變方向角度，0° 向右，90° 向下。
• offset：百分比偏移量（0-100），可選。

徑向漸變格式

"r[(fx, fy)] color1 [- color2 [:offset]]* - colorN"
例子："r#fff-#000"              // 中心白向外黑
     "r(0.25,0.75)#fff-#000"   // 焦點在 (0.25,0.75)

僅適用於圓/橢圓。

SVG 底層原理對照

Raphael 線性漸變對應 SVG <linearGradient>：

<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0)"/>
  <stop offset="100%" style="stop-color:rgb(255,0,0)"/>
</linearGradient>
<ellipse fill="url(#grad)" .../>

• x1,y1,x2,y2 決定漸變方向（水平/垂直/角度）。
• stop 定義顏色節點及偏移。

draw2d 中應用示例

在自定義 Figure 的 repaint 方法中：

repaint: function(attributes) {
    // 設置垂直方向漸變：從淺灰(5%) 到深灰(95%)
    attributes.fill = "90-#f0f0f0:5-#333333:95";
    this._super(attributes);
}

漸變參數可根據業務動態計算，如根據數值大小調整顏色區間。

注意事項

• 僅支持 SVG/VML 渲染模式，Canvas 模式下 Raphael 不直接繪製，可能不生效。
• 複雜漸變（多色節點、徑向）需確保目標形狀類型匹配。
• 性能：大量漸變形狀同時繪製可能影響幀率，建議適度使用。