~楓花雪岳~: [C#] 繪製漸層

根據官方文章 - How to: Create a Linear Gradient 的筆記，了解如何使用 LinearGradientBrush 和 Blend

水平漸層

當水平座標超過 200 時，漸層會重複，把長度拉到 600，可以看見顏色重覆三次

private void UseHorizontalLinearGradients(PaintEventArgs e)
{
	using LinearGradientBrush linGrBrush = new LinearGradientBrush(
		new Point(0, 10),
		new Point(200, 10),
		Color.FromArgb(255, 255, 0, 0),  // Start Color：Opaque Red
		Color.FromArgb(255, 0, 0, 255)); // End Color：Opaque Blue
	
	e.Graphics.FillRectangle(linGrBrush, 0, 5, 600, 30);
}

自訂水平漸層

利用 Blend 來更細緻自訂漸層

private void CustomizeLinearGradients(PaintEventArgs e)
{
	using LinearGradientBrush linGrBrush = new LinearGradientBrush(
		new Point(0, 10),
		new Point(200, 10),
		Color.FromArgb(255, 255, 0, 0),  // Start Color：Opaque Red
		Color.FromArgb(255, 0, 0, 255)); // End Color：Opaque Blue
	
	float[] factors = { 0.2f, 0.4f, 0.8f, 0.8f, 0.4f, 0.2f };
	float[] positions = { 0.0f, 0.2f, 0.4f, 0.6f, 0.8f, 1.0f };
	
	Blend blend = new Blend();
	blend.Factors = factors;
	blend.Positions = positions;
	linGrBrush.Blend = blend;
	
	e.Graphics.FillRectangle(linGrBrush, 0, 45, 600, 30);
}

Blend 兩大重點屬性：[Factor-顏色比例] 和 [Position-顏色位置]，兩者值皆介於 0.0f 和 1.0f 之間且兩者必須成對設定。

[Factor-顏色比例]：該筆記是設定 Red 到 Blue 漸層，來驗證看看文件上的說明

private void FactorsDemo(PaintEventArgs e)
{
	using LinearGradientBrush linGrBrush = new LinearGradientBrush(
		new Point(0, 10),
		new Point(200, 10),
		Color.FromArgb(255, 255, 0, 0),  // Start Color：Opaque Red
		Color.FromArgb(255, 0, 0, 255)); // End Color：Opaque Blue

	float[] factors = { 0.0f, 0.5f, 1.0f }; // 最左邊全紅色、最右邊全藍色
	float[] positions = { 0.0f, 0.5f, 1.0f };
	
	Blend blend = new Blend();
	blend.Factors = factors;
	blend.Positions = positions;
	linGrBrush.Blend = blend;
	
	e.Graphics.FillRectangle(linGrBrush, 0, 5, 200, 30);
}

[Position-顏色位置]：多設定值時，起始值 0.0f 和結束值 1.0f 必須存在，要不然會拋出 Exception 的

完整 C# Code

using System.Drawing.Drawing2D;

namespace GraphicsNETSample
{
    public partial class FrmLinearGradient : Form
    {
        public FrmLinearGradient()
        {
            InitializeComponent();
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);

            UseHorizontalLinearGradients(e);
            CustomizeLinearGradients(e);
        }

        private LinearGradientBrush GetLinearGradientBrush()
        {
            return new LinearGradientBrush(
            new Point(0, 10),
            new Point(200, 10),
            Color.FromArgb(255, 255, 0, 0),
            Color.FromArgb(255, 0, 0, 255));
        }

        private void UseHorizontalLinearGradients(PaintEventArgs e)
        {
            using LinearGradientBrush linGrBrush = GetLinearGradientBrush();

            e.Graphics.FillRectangle(linGrBrush, 0, 5, 600, 30);
        }

        private void CustomizeLinearGradients(PaintEventArgs e)
        {
            using LinearGradientBrush linGrBrush = GetLinearGradientBrush();

            float[] factors = { 0.2f, 0.4f, 0.8f, 0.8f, 0.4f, 0.2f };
            float[] positions = { 0.0f, 0.2f, 0.4f, 0.6f, 0.8f, 1.0f };

            Blend blend = new Blend();
            blend.Factors = factors;
            blend.Positions = positions;
            linGrBrush.Blend = blend;

            e.Graphics.FillRectangle(linGrBrush, 0, 45, 600, 30);
        }
    }
}

~楓花雪岳~

星期二, 8月 06, 2024

[C#] 繪製漸層

沒有留言:

張貼留言