C# WinForms 打造專屬藝術字控制項：GDI+ 矩陣變換與陰影浮雕效果實作

編輯：關於C語言

想在 WinForms 專案中嵌入具備投影、浮雕、描邊、漸層等專業排版效果的藝術字嗎？本文完整呈現一個繼承 UserControl 的 WordArt 控制項，核心運用 Graphics.Matrix 仿射變換與 TextRenderingHint 字體微調，零第三方依賴即可落地。

控制項架構總覽

public partial class WordArt : UserControl
{
    // === 核心屬性 ===
    public string Caption { get; set; } = "WordArt";           // 顯示文字
    public Font WordArtFont { get; set; } = new Font("微軟正黑體", 24); // 字體大小
    public Color WordArtForeColor { get; set; } = Color.BlueViolet;     // 主色
    public Color WordArtBackColor { get; set; } = Color.Gray;           // 陰影/背景色
    
    // === 繪圖品質 ===
    public TextRenderingHint WordArtTextRenderingHint { get; set; } = TextRenderingHint.ClearTypeGridFit;
    public SmoothingMode WordArtSmoothingMode { get; set; } = SmoothingMode.AntiAlias;

    // === 效果樣式 ===
    public WordArtEffectStyle WordArtEffect { get; set; } = WordArtEffectStyle.Projection;

    public enum WordArtEffectStyle
    {
        None,           // 純文字
        Projection,     // 投影/斜切
        Emboss,         // 浮雕
        Outline,        // 描邊
        Gradient        // 漸層填滿
    }

    public WordArt()
    {
        InitializeComponent();
        SetStyle(ControlStyles.AllPaintingInWmPaint | 
                 ControlStyles.OptimizedDoubleBuffer | 
                 ControlStyles.ResizeRedraw | 
                 ControlStyles.UserPaint, true);
    }
}

核心繪製邏輯：OnPaint 覆寫

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Graphics g = e.Graphics; // 使用傳入的 Graphics，避免 CreateGraphics 閃爍
    
    g.TextRenderingHint = WordArtTextRenderingHint;
    g.SmoothingMode = WordArtSmoothingMode;

    // 文字尺寸測量
    SizeF textSize = g.MeasureString(Caption, WordArtFont);
    float cx = (Width - textSize.Width) / 2;
    float cy = (Height - textSize.Height) / 2;

    using (Brush foreBrush = new SolidBrush(WordArtForeColor))
    using (Brush backBrush = new SolidBrush(WordArtBackColor))
    using (StringFormat sf = new StringFormat { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center })
    {
        RectangleF layoutRect = new RectangleF(cx, cy, textSize.Width, textSize.Height);

        switch (WordArtEffect)
        {
            case WordArtEffectStyle.Projection:
                DrawProjection(g, layoutRect, foreBrush, backBrush);
                break;
            case WordArtEffectStyle.Emboss:
                DrawEmboss(g, layoutRect, foreBrush, backBrush);
                break;
            case WordArtEffectStyle.Outline:
                DrawOutline(g, layoutRect, foreBrush);
                break;
            case WordArtEffectStyle.Gradient:
                DrawGradient(g, layoutRect);
                break;
            default:
                g.DrawString(Caption, WordArtFont, foreBrush, layoutRect, sf);
                break;
        }
    }
}

四大經典效果實作細節

1. 投影效果：Shear + Scale + Translate

private void DrawProjection(Graphics g, RectangleF rect, Brush fore, Brush back)
{
    // 1. 繪製陰影層 (灰色、斜切、縮扁、位移)
    Matrix shadowMatrix = new Matrix();
    shadowMatrix.Shear(-0.3f, 0);      // X 方向剪切 -0.3 弧度
    shadowMatrix.Scale(1, 0.6f);       // Y 方向壓縮 60%
    shadowMatrix.Translate(4, 6);      // 向右下位移 4,6 像素
    g.Transform = shadowMatrix;
    g.DrawString(Caption, WordArtFont, back, rect, StringFormat.GenericTypographic);

    // 2. 重置矩陣繪製主文字
    g.ResetTransform();
    g.DrawString(Caption, WordArtFont, fore, rect, StringFormat.GenericTypographic);
}

矩陣數學直覺：Shear 傾斜字形、Scale 模擬透視縮短、Translate 產生立體深度感。

2. 浮雕效果：雙層偏移疊加

private void DrawEmboss(Graphics g, RectangleF rect, Brush fore, Brush back)
{
    // 高光 (左上亮)
    g.DrawString(Caption, WordArtFont, Brushes.White, 
        rect.X - 1, rect.Y - 1);
    // 陰影 (右下暗)
    g.DrawString(Caption, WordArtFont, Brushes.DarkGray, 
        rect.X + 1, rect.Y + 1);
    // 主體
    g.DrawString(Caption, WordArtFont, fore, rect);
}

3. 描邊效果：GraphicsPath + DrawPath

private void DrawOutline(Graphics g, RectangleF rect, Brush fore)
{
    using (GraphicsPath path = new GraphicsPath())
    {
        path.AddString(Caption, WordArtFont.FontFamily, (int)WordArtFont.Style, 
                       WordArtFont.Size * 72f / g.DpiY, rect, StringFormat.GenericTypographic);
        
        // 外框：較粗、深色
        using (Pen outlinePen = new Pen(Color.Black, 2.5f) { LineJoin = LineJoin.Round })
            g.DrawPath(outlinePen, path);
        
        // 填滿
        g.FillPath(fore, path);
    }
}

4. 漸層填滿：LinearGradientBrush

private void DrawGradient(Graphics g, RectangleF rect)
{
    using (var brush = new LinearGradientBrush(
        rect, Color.Gold, Color.OrangeRed, LinearGradientMode.Vertical))
    {
        g.DrawString(Caption, WordArtFont, brush, rect, StringFormat.GenericTypographic);
    }
}

設計時支援：屬性瀏覽器即時預覽

[Category("WordArt")]
[Description("顯示文字")]
[DefaultValue("WordArt")]
public string Caption { get; set; } = "WordArt";

[Category("WordArt")]
[TypeConverter(typeof(FontConverter))]
public Font WordArtFont { get; set; } = new Font("微軟正黑體", 24);

[Category("WordArt")]
[Editor(typeof(ColorEditor), typeof(UITypeEditor))]
public Color WordArtForeColor { get; set; } = Color.BlueViolet;

// ... 其他屬性同理加上 Category/Description/Editor 屬性

加上這些 Design-time Attributes，即可在 Visual Studio 設計介面直接調整字體、顏色、效果並即時預覽。

效能優化關鍵點

雙緩衝：SetStyle(..., OptimizedDoubleBuffer | AllPaintingInWmPaint, true) 消除閃爍
重用資源：Font、Brush、Matrix 盡量在屬性變更時快取，避免 OnPaint 高頻配置
使用 e.Graphics：切勿在 OnPaint 呼叫 CreateGraphics()，會導致重繪異常
Dpi 感知：AddString 字體大小需乘 72f / g.DpiY 換算為 Em 単位