Delphi 純代碼繪製 3D 介面：漸層背景、銅柱邊框、立體按鈕完整源碼

不需 OpenGL、Direct3D、第三方皮膚引擎，僅用 Delphi 基礎 TCanvas 繪圖函數（LineTo、RoundRect、Pen/Brush 顏色漸變），即可繪製出極具質感的 3D 介面：漸層背景、銅柱狀窗口邊框、立體按鈕/面板。本文提供四大核心繪製子程序完整源碼，並展示卡拉 OK 點歌鍵盤介面實戰應用。

Canvas 核心函數速查

Canvas.Brush.Style := bsClear;          // 透明筆刷
Canvas.Pen.Color := RGB(R, G, B);       // 畫筆顏色
Canvas.Pen.Style := psSolid;            // 實線
Canvas.Pen.Width := 1;                  // 線寬
Canvas.MoveTo(X, Y);                    // 移動筆尖
Canvas.LineTo(X, Y);                    // 畫直線
Canvas.RoundRect(X1, Y1, X2, Y2, X3, Y3); // 圓角矩形，X3/Y3 控制圓角半徑

四大繪製子程序

1. 漸層背景 DrawBk

procedure DrawBk(Sender: TForm; R, G, B: Integer);
var I, J, K: Integer;
begin
  with Sender do begin
    Canvas.Pen.Style := psSolid; Canvas.Pen.Width := 1;
    K := (B div 3) * 2;
    for I := 0 to Height - 1 do begin
      if I < K then J := 0 else Inc(J);
      if J > B then J := B;
      Canvas.Pen.Color := RGB(R, G, B - J); // 藍色向深漸層
      Canvas.MoveTo(0, I); Canvas.LineTo(Width, I);
    end;
  end;
end;

2. 窗口四周銅柱 DrawRoll

procedure DrawRoll(Sender: TForm; X0, Y0, W, H, R, G, B, LW: Integer);
var I, J, J1, J2, J3, M: Integer;
begin
  J1 := R div LW - 2; J2 := G div LW; J3 := B div LW + 2; M := LW div 3;
  with Sender do
    for I := 0 to LW - 1 do begin
      if I < M then J := M - I else J := I - M;
      Canvas.Pen.Color := RGB(R - J1*J, G - J2*J, B - J3*J);
      // 左邊、右邊、上邊、下邊 四條線
      Canvas.MoveTo(I + X0, I + Y0); Canvas.LineTo(I + X0, H - I + Y0);
      Canvas.MoveTo(W - I - 1 + X0, I + Y0); Canvas.LineTo(W - I - 1 + X0, H - I + Y0);
      Canvas.MoveTo(I + X0, I + Y0); Canvas.LineTo(W - I + X0, I + Y0);
      Canvas.MoveTo(I + X0, H - I + Y0); Canvas.LineTo(W - I + X0, H - I + Y0);
    end;
end;

3. 中間分隔銅柱 DrawSRoll

procedure DrawSRoll(Sender: TForm; X0, Y0, W, H, R, G, B, LW: Integer);
var I, J, J1, J2, J3, M: Integer;
begin
  J1 := R div LW - 2; J2 := G div LW; J3 := B div LW + 2; M := LW div 3;
  with Sender do
    for I := 0 to LW - 1 do begin
      if I < M then J := M - I else J := I - M;
      Canvas.Pen.Color := RGB(R - J1*J, G - J2*J, B - J3*J);
      Canvas.MoveTo(I + X0, I + Y0); Canvas.LineTo(I + W + X0, I + H + Y0); // 對角線
    end;
end;

4. 立體圓角框 DrawRect (按鈕/面板專用)

procedure DrawRect(Sender: TForm; X0, Y0, W, H, R, G, B, LW, WW, FG: Integer);
var II, I, J, J1, J2, J3, M: Integer;
begin
  J1 := R div LW - 2; J2 := G div LW; J3 := B div LW + 2; M := LW div 3;
  if FG = 1 then begin // 反向高光
    J1 := J1 div 2 + (J1 + 2) div 3;
    J2 := J2 div 2 + (J2 + 2) div 3;
    J3 := J3 div 2 + (J3 + 2) div 3;
  end;
  with Sender do begin
    Canvas.Brush.Style := bsClear;
    for II := 0 to LW - 1 do begin
      if FG = 0 then I := II else I := LW - II;
      if I < M then J := M - I else J := I - M;
      Canvas.Pen.Color := RGB(R - J1*J, G - J2*J, B - J3*J);
      Canvas.RoundRect(I + X0 - LW, I + Y0 - LW,
        X0 + W - I + LW, H + Y0 - I + LW, WW, WW);
    end;
  end;
end;

實戰：卡拉 OK 點歌鍵盤介面 FormPaint

procedure TForm2.FormPaint(Sender: TObject);
begin
  DrawBk(Form2, 60, 60, 255);                    // 藍色漸層背景
  DrawRoll(Form2, 0, 0, 640, 480, 250, 200, 100, 10); // 窗口銅柱邊框

  // 圖片框
  with Image1 do DrawRect(Form2, Left, Top, Width, Height, 250, 200, 100, 10, 1, 1);

  // 16 個按鈕面板
  with Panel1  do DrawRect(Form2, Left, Top, Width, Height, 250, 238, 238, 10, 1, 1);
  with Panel2  do DrawRect(Form2, Left, Top, Width, Height, 250, 238, 238, 10, 1, 1);
  // ... Panel3~Panel16 同理 ...
  with Panel11 do DrawRect(Form2, Left, Top, Width, Height*2+2, 250, 238, 238, 10, 1, 1);

  // 功能區
  with SeleFun do DrawRect(Form2, Left, Top, Width, Height, 250, 238, 238, 10, 1, 1);
  with Panel15 do begin
    DrawRect(Form2, Left, Top, 222, Height, 250, 238, 238, 10, 1, 1);
    DrawRect(Form2, Left-11, Top-11, 242, 350, 250, 258, 238, 10, 1, 1); // 外框
  end;

  DrawSRoll(Form2, 291, 5, 0, 470, 250, 200, 100, 12); // 中間分隔銅柱

  with GD do DrawRect(Form2, Left, Top, Width, Height, 250, 238, 238, 10, 1, 1);
  with GK do DrawRect(Form2, Left, Top, Width, Height, 250, 238, 238, 10, 1, 1);
end;

優缺點與適用場景

原始碼已在 Delphi 6 驗證通過，無需任何外掛元件。若專案追求「輕量、自可控、無相依」，這套純 Canvas 3D 繪製庫是極佳選擇。