再學GDI+[64]: 路徑漸層筆刷中心與環繞色深度解析 - SetCenterColor、SetSurroundColors 多形狀行為差異

前言

路徑漸層筆刷的顏色由中心色與環繞色決定，但其行為會隨路徑形狀（矩形、三角形、橢圓）而異。本文透過矩形與三角形並排比較，揭示 SetSurroundColors 對應路徑頂點的機制，以及橢圓路徑的特殊處理。

核心觀察：矩形 vs 三角形

雙形狀並排實作

procedure TForm1.FormPaint(Sender: TObject);
const
  ColorArr: array[0..3] of TGPColor = ($FFFF0000, $FF00FF00, $FF0000FF, $FFFFFF00);  {紅綠藍黃}
var
  rt: TRect;
  pts: array of TGPPoint;
  g: TGPGraphics;
  path1, path2: TGPGraphicsPath;
  pb1, pb2: TGPPathGradientBrush;
  num: Integer;
begin
  rt := Bounds(10, 10, 150, 150);
  g := TGPGraphics.Create(Canvas.Handle);
  
  {=== 矩形路徑 ===}
  path1 := TGPGraphicsPath.Create;
  path1.AddRectangle(MakeRect(rt));
  pb1 := TGPPathGradientBrush.Create(path1);
  num := 4;
  pb1.SetSurroundColors(PARGB(@ColorArr), num);  {4 色對應 4 頂點}
  g.FillPath(pb1, path1);
  
  {=== 三角形路徑 ===}
  OffsetRect(rt, 160, 0);
  SetLength(pts, 3);
  pts[0] := MakePoint(rt.Left + (rt.Right-rt.Left) div 2, rt.Top);  {頂點}
  pts[1] := MakePoint(rt.Left, rt.Bottom);  {左下}
  pts[2] := TGPPoint(rt.BottomRight);       {右下}
  path2 := TGPGraphicsPath.Create;
  path2.AddPolygon(PGPPoint(pts), Length(pts));
  pb2 := TGPPathGradientBrush.Create(path2);
  num := 3;
  pb2.SetSurroundColors(PARGB(@ColorArr), num);  {取前 3 色對應 3 頂點}
  g.FillPath(pb2, path2);
  
  pb1.Free; pb2.Free; path1.Free; path2.Free; g.Free;
end;

執行效果預覽

關鍵發現與最佳實踐

1. 頂點順序決定色序：路徑添加頂點的順序直接對應 SetSurroundColors 陣列索引
2. 矩形頂點順序：左上→右上→右下→左下（順時針）
3. 三角形頂點順序：依 AddPolygon 陣列順序
4. 橢圓無頂點對應：若用橢圓路徑建立筆刷，SetSurroundColors 行為不可預期；建議改用 SetInterpolationColors 或提取點陣列重建
5. 中心色預設差異：
   • 路徑建立：預設白色
   • 點陣列建立：預設黑色（需手動 SetCenterColor）

表單定義檔

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 172
  ClientWidth = 327
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  Position = poDesktopCenter
  OnPaint = FormPaint
  PixelsPerInch = 96
  TextHeight = 13
end