顏色漸變
draw2d 目前沒有提供直接對Figure 設置漸變效果的API.
但是raphael 有提供， 這樣的話基本上在draw2d實現漸變成為可能。
顏色漸變功能來源
raphael 提供的圖形背景色漸變的設置：看例子
<!--Add by oscar999-->
</HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Linear Gradient</title>
<script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var paper = Raphael(10, 10, 800, 600);
var circle = paper.circle(150, 150, 150);
circle.attr({
"fill": "90-#f00:5-#00f:95",
"fill-opacity": 0.5
});
</script>
</body>
</html>
先看一下 raphael 官方API對於fill 設置漸變色的說明：
Linear gradient format: “ angle - colour [- colour [: offset ]]*- colour ”, example: “90-#fff-#000” – 90°gradient from white to black or “0-#fff-#f00:20-#000” – 0° gradient from white via red (at 20%) to black.
radial gradient: “r[( fx , fy )] colour [- colour [: offset ]]*- colour ”, example: “r#fff-#000” –gradient from white to black or “r(0.25, 0.75)#fff-#000” – gradient from white to black with focus pointat 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
這裡簡單說明一下 --
"fill": "90-#f00:5-#00f:95"
90 設置的是漸變的方向的角度， 90 就是垂直。
從#f00漸變到#00f， :5 和:95 是偏移量。
如果對以上的理解還不是很清晰的話，就要追溯到源頭了。
看看在SVG中是如何處理漸變的。
在 SVG 中，有兩種主要的漸變類型：
線性漸變
放射性漸變
這裡以 線性漸變來說明了：
<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
看例子：
< xml version="1.0" standalone="no" >
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)" />
</svg>
代碼解釋：
<linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
<linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
這下應該豁然了....
draw2d的處理方式
在Figure 對應的Class(比如draw2d.shape.basic.Rectangle)的repaint 方法中添加：
attributes.fill = "90-#fff:5-#000:95";
漸變顏色根據需要配置，也可以動態配置
