C# 超酷圖像特效（八）：百葉窗效果實作 (垂直/水平)

前言

本系列第八篇，實作「百葉窗效果」：將圖像切割為等寬條帶，依序顯示條帶內容，形成垂直或水平百葉窗開啟動畫。

效果原理

• 垂直：寬度分 30 條，每條寬 dw。每幀向右擴展 1 像素寬度，逐條繪製像素。
• 水平：高度分 20 條，每條高 dh。每幀向下擴展 1 像素高度。
• 使用 Thread.Sleep(100) 控制動畫速度。

完整程式碼

// 垂直百葉窗
private void btnVerticalBlinds_Click(object sender, EventArgs e)
{
    try
    {
        MyBitmap = (Bitmap)pictureBox1.Image.Clone();
        int dw = MyBitmap.Width / 30, dh = MyBitmap.Height;
        using (var g = pictureBox1.CreateGraphics())
        {
            g.Clear(Color.Gray);
            var points = new Point[30];
            for (int x = 0; x < 30; x++) points[x] = new Point(x * dw, 0);

            using (var bmp = new Bitmap(MyBitmap.Width, MyBitmap.Height))
            {
                for (int i = 0; i < dw; i++)
                {
                    for (int j = 0; j < 30; j++)
                        for (int k = 0; k < dh; k++)
                            bmp.SetPixel(points[j].X + i, points[j].Y + k,
                                MyBitmap.GetPixel(points[j].X + i, points[j].Y + k));
                    pictureBox1.Image = bmp;
                    pictureBox1.Refresh();
                    Thread.Sleep(100);
                }
            }
        }
    }
    catch (Exception ex) { MessageBox.Show(ex.Message, "提示"); }
}

// 水平百葉窗
private void btnHorizontalBlinds_Click(object sender, EventArgs e)
{
    try
    {
        MyBitmap = (Bitmap)pictureBox1.Image.Clone();
        int dh = MyBitmap.Height / 20, dw = MyBitmap.Width;
        using (var g = pictureBox1.CreateGraphics())
        {
            g.Clear(Color.Gray);
            var points = new Point[20];
            for (int y = 0; y < 20; y++) points[y] = new Point(0, y * dh);

            using (var bmp = new Bitmap(MyBitmap.Width, MyBitmap.Height))
            {
                for (int i = 0; i < dh; i++)
                {
                    for (int j = 0; j < 20; j++)
                        for (int k = 0; k < dw; k++)
                            bmp.SetPixel(points[j].X + k, points[j].Y + i,
                                MyBitmap.GetPixel(points[j].X + k, points[j].Y + i));
                    pictureBox1.Image = bmp;
                    pictureBox1.Refresh();
                    Thread.Sleep(100);
                }
            }
        }
    }
    catch (Exception ex) { MessageBox.Show(ex.Message, "提示"); }
}

效果圖

優化建議

• 使用 Graphics.DrawImage 繪製矩形條帶，替代逐像素 SetPixel，速度提升數量級。
• 雙緩衝：在記憶體 Bitmap 完成幀後一次性指派 PictureBox.Image。
• 非同步動畫：使用 Task.Delay + async/await 避免阻塞 UI 執行緒。

結語

百葉窗效果展示條帶級像素操作與動畫時序控制。掌握矩形區域複製與 DrawImage 高效繪製，可輕鬆擴充百葉窗變體 (斜向、圓形擴散等)。