再學GDI+[37]: 畫筆自訂線帽 - TGPCustomLineCap 打造專屬起始/終止箭頭形狀

前言

GDI+ 允許開發者使用 TGPCustomLineCap 定義完全自訂的線帽形狀。本文示範以路徑建立「小矩形起始帽」與「小三角形終止帽」，並透過滑鼠繪製線條即時套用效果。

自訂線帽建立流程

1. 建立代表線帽形狀的 TGPGraphicsPath
2. TGPCustomLineCap.Create(startPath, endPath) 建立線帽物件
3. pen.SetCustomStartCap/SetCustomEndCap 套用至畫筆

滑鼠互動繪圖實作

• 按下：記錄起點，XOR 模式橡皮筋預覽
• 移動：更新終點，即時重繪預覽線
• 釋放：用 GDI+ 畫筆套用自訂線帽正式繪製
• 隨機顏色增加視覺趣味

核心程式碼

var
  ph1, ph2: TGPGraphicsPath;  {線帽路徑}
  cap1, cap2: TGPCustomLineCap;  {線帽物件}
  x1, y1, x2, y2: Integer;
  f: Boolean; PenColor: TColor;

procedure TForm1.FormCreate(Sender: TObject);
const pts: array[0..2] of TGPPoint = ((X:-3;Y:0),(X:3;Y:0),(X:0;Y:3));
begin
  ph1 := TGPGraphicsPath.Create; ph1.AddRectangle(MakeRect(-2, 0, 4, 3));  {起始: 小矩形}
  ph2 := TGPGraphicsPath.Create; ph2.AddPolygon(PGPPoint(@pts), 3);         {終止: 小三角形}
  cap1 := TGPCustomLineCap.Create(nil, ph1);  {無起始帽、有終止帽}
  cap2 := TGPCustomLineCap.Create(nil, ph2);
end;

procedure TForm1.FormMouseUp(Sender: TObject; ...);
var g: TGPGraphics; p: TGPPen;
begin
  if not f then Exit; f := False;
  g := TGPGraphics.Create(Canvas.Handle);
  p := TGPPen.Create(ColorRefToARGB(PenColor), 3);
  p.SetCustomStartCap(cap1);  {套用自訂起始帽}
  p.SetCustomEndCap(cap2);    {套用自訂終止帽}
  g.DrawLine(p, x1, y1, x2, y2);
  p.Free; g.Free;
end;

執行效果預覽

線帽路徑設計原則

• 座標系統：線帽路徑以 (0,0) 為線條端點，正 X 軸沿線條方向
• 尺度：路徑單位對應畫筆寬度倍數(範例中矩形寬 4、高 3 對應 3px 畫筆)
• 方向：起始帽指向線條內部，終止帽指向線條外部
• 複雜度：路徑點數越多渲染越慢，建議 < 20 點

表單定義檔

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 193
  ClientWidth = 296
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  Position = poDesktopCenter
  OnCreate = FormCreate
  OnDestroy = FormDestroy
  OnMouseDown = FormMouseDown
  OnMouseMove = FormMouseMove
  OnMouseUp = FormMouseUp
  PixelsPerInch = 96
  TextHeight = 13
end