DelphiX 圖片透明度動態控制：TrackBar 即時調整 Alpha 混合效果

核心功能：DrawAlpha 實現像素級透明度控制

DelphiX 的 TPictureCollectionItem.DrawAlpha 方法允許在繪製時指定全域 Alpha 值（0-255），實現圖片的淡入淡出、半透明疊加、UI 透明度調節等效果。結合 TTrackBar 即可構建直觀的透明度調節介面。

完整範例：即時透明度調節器

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, DXDraws, StdCtrls, DXClass, ComCtrls;

type
  TForm1 = class(TForm)
    DXDraw1: TDXDraw;
    DXImageList1: TDXImageList;
    TrackBar1: TTrackBar;
    procedure FormCreate(Sender: TObject);
    procedure TrackBar1Change(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

var
  PicItem: TPictureCollectionItem;

procedure TForm1.FormCreate(Sender: TObject);
const
  ImgPath1 = 'C:\Temp\DelphiX.bmp';
begin
  // 綁定繪圖目標
  DXImageList1.DXDraw := DXDraw1;
  
  // 載入測試圖片
  PicItem := TPictureCollectionItem(DXImageList1.Items.Add);
  PicItem.Picture.LoadFromFile(ImgPath1);
  
  // 設定 TrackBar 屬性
  TrackBar1.Max := 255;      // Alpha 最大值
  TrackBar1.Min := 0;        // Alpha 最小值 (全透明)
  TrackBar1.Position := 255; // 預設不透明
  TrackBar1.Height := 22;
  TrackBar1.ShowSelRange := False;
  TrackBar1.Align := alBottom;  // 置底對齊
  
  // 讓 DXDraw 填滿剩餘空間
  DXDraw1.Align := alClient;
end;

procedure TForm1.TrackBar1Change(Sender: TObject);
var
  r: TRect;
begin
  // 計算圖片居中矩形區域
  r := Bounds(
    (DXDraw1.Width - PicItem.Width) div 2,
    (DXDraw1.Height - PicItem.Height) div 2,
    PicItem.Width,
    PicItem.Height
  );
  
  // 清除背景 (黑色)
  DXDraw1.Surface.Fill(0);
  
  // 核心：DrawAlpha 繪製，Alpha 值來自 TrackBar.Position (0-255)
  // 參數：目標表面、目標矩形、圖樣索引、Alpha值
  PicItem.DrawAlpha(DXDraw1.Surface, r, 0, TrackBar1.Position);
  
  // 翻轉顯示
  DXDraw1.Flip;
end;

end.

DFM 定義

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'DelphiX Alpha 透明度調節示例'
  ClientHeight = 300
  ClientWidth = 400
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  OnCreate = FormCreate
  PixelsPerInch = 96
  TextHeight = 13
  object DXDraw1: TDXDraw
    Left = 0
    Top = 0
    Width = 400
    Height = 278
    Align = alClient
    AutoInitialize = True
    AutoSize = True
    Color = clBlack
    Display.FixedBitCount = False
    Display.FixedRatio = True
    Display.FixedSize = True
    Options = [doAllowReboot, doWaitVBlank, doCenter, do3D, doDirectX7Mode, doHardware, doSelectDriver]
    SurfaceHeight = 278
    SurfaceWidth = 400
    TabOrder = 0
    Traces = <>
  end
  object TrackBar1: TTrackBar
    Left = 0
    Top = 278
    Width = 400
    Height = 22
    Align = alBottom
    Max = 255
    Min = 0
    Position = 255
    ShowSelRange = False
    TabOrder = 1
    OnChange = TrackBar1Change
  end
  object DXImageList1: TDXImageList
    Left = 40
    Top = 16
  end
end

DrawAlpha 參數詳細解析

function DrawAlpha(
  Dest: TDirectDrawSurface;  // 目標繪圖表面
  const DestRect: TRect;     // 目標矩形區域 (支援縮放)
  Pattern: Integer;          // 圖樣索引 (動畫幀)
  Alpha: Byte                // 全域透明度 0(全透明) - 255(不透明)
): Boolean;

進階技巧：動畫化透明度變化

1. 淡入淡出效果

type
  TFadeState = (fsIdle, fsFadingIn, fsFadingOut);

var
  FadeState: TFadeState = fsIdle;
  FadeAlpha: Integer = 0;
  FadeSpeed: Integer = 5; // 每幀變化量

procedure TForm1.DXTimer1Timer(Sender: TObject; LagCount: Integer);
begin
  DXDraw1.Surface.Fill(0);
  
  case FadeState of
    fsFadingIn:
    begin
      Inc(FadeAlpha, FadeSpeed * (LagCount + 1));
      if FadeAlpha >= 255 then
      begin
        FadeAlpha := 255;
        FadeState := fsIdle;
      end;
    end;
    fsFadingOut:
    begin
      Dec(FadeAlpha, FadeSpeed * (LagCount + 1));
      if FadeAlpha <= 0 then
      begin
        FadeAlpha := 0;
        FadeState := fsIdle;
      end;
    end;
  end;
  
  // 使用動態 Alpha 繪製
  PicItem.DrawAlpha(DXDraw1.Surface, CenterRect, 0, FadeAlpha);
  DXDraw1.Flip;
end;

// 觸發淡入
procedure TForm1.btnFadeInClick(Sender: TObject);
begin
  FadeAlpha := 0;
  FadeState := fsFadingIn;
end;

// 觸發淡出
procedure TForm1.btnFadeOutClick(Sender: TObject);
begin
  FadeAlpha := 255;
  FadeState := fsFadingOut;
end;

2. 脈動效果

procedure TForm1.DXTimer1Timer(Sender: TObject; LagCount: Integer);
var
  PulseAlpha: Integer;
begin
  DXDraw1.Surface.Fill(0);
  
  // 使用正弦波產生 0-255 週期性變化
  // Angle 每幀增加，週期約 256 幀
  PulseAlpha := 128 + Round(127 * Sin(Angle * Pi / 128));
  
  PicItem.DrawAlpha(DXDraw1.Surface, CenterRect, 0, PulseAlpha);
  DXDraw1.Flip;
  
  Inc(Angle);
end;

DrawAlpha vs DrawRotateAlpha 對比

透明色與 Alpha 通道的協同工作

DelphiX 圖片支援兩層透明機制：

1. 透明色 (TransparentColor + Transparent := True)：將指定顏色像素視為完全透明（Alpha=0）
2. 全域 Alpha (DrawAlpha 的 Alpha 參數)：在透明色基礎上，再乘以全域透明度係數

// 完整透明度計算公式
FinalAlpha = (PixelAlpha * GlobalAlpha) div 255;

// 其中 PixelAlpha 來源：
// - 若像素顏色 = TransparentColor 且 Transparent=True → PixelAlpha = 0
// - 否則 → PixelAlpha = 255 (不透明像素)
// - 若圖片本身含 Alpha 通道 (32位 BMP/PNG) → PixelAlpha = 圖片Alpha值

常見問題排查

效能優化建議

• 批次繪製：相同 Alpha 值的多張圖片，合併繪製呼叫
• 避免頻繁建立 TRect：預先計算常用矩形，或使用 Rect() 函數
• 靜態 UI 元素：Alpha=255 時改用 Draw，省去 Alpha 混合運算
• 大量粒子：考慮使用 TDXSpriteEngine 管理生命週期與批次渲染

總結

DrawAlpha 配合 TTrackBar 提供了直觀的透明度控制介面，是實現 UI 淡入淡出、半透明疊加、特效透明度動畫的基礎工具。掌握透明色與全域 Alpha 的雙層機制，能創建豐富的視覺效果層次。