HOW TO:使用色彩矩陣轉換單一色彩How to: Use a Color Matrix to Transform a Single Color

GDI + 提供ImageBitmap來儲存及操作影像的類別。GDI+ provides the Image and Bitmap classes for storing and manipulating images. ImageBitmap物件會儲存每個像素的色彩為 32 位元數字:8 位元用於紅色、 綠色、 藍色和 alpha 的每個。Image and Bitmap objects store the color of each pixel as a 32-bit number: 8 bits each for red, green, blue, and alpha. 每四個元件是從 0 到 255,0 代表不含濃度,表示完整濃度 255 的數字。Each of the four components is a number from 0 through 255, with 0 representing no intensity and 255 representing full intensity. Alpha 元件指定色彩的透明度:0 是完全透明的而且完全不透明 255。The alpha component specifies the transparency of the color: 0 is fully transparent, and 255 is fully opaque.

色彩向量是表單 (紅色、 綠色、 藍色、 alpha) 的 4-tuple。A color vector is a 4-tuple of the form (red, green, blue, alpha). 例如,色彩向量 (0,255,0,255) 表示不透明的色彩,含紅色或藍色,但有綠色的濃度。For example, the color vector (0, 255, 0, 255) represents an opaque color that has no red or blue, but has green at full intensity.

表示色彩的另一個慣例會將數字 1 用於完整濃度。Another convention for representing colors uses the number 1 for full intensity. 使用這個慣例,會由向量 (0、 1、 0、 1) 表示前面段落中所述的色彩。Using that convention, the color described in the preceding paragraph would be represented by the vector (0, 1, 0, 1). GDI + 色彩轉換執行時使用 成完整濃度 1 慣例。GDI+ uses the convention of 1 as full intensity when it performs color transformations.

您可以套用色彩向量線性轉換 (旋轉、 縮放和 like) 乘以 4 × 4 矩陣色彩向量。You can apply linear transformations (rotation, scaling, and the like) to color vectors by multiplying the color vectors by a 4×4 matrix. 不過,您無法使用 4 × 4 矩陣,以執行翻譯 (非線性)。However, you cannot use a 4×4 matrix to perform a translation (nonlinear). 如果您將虛擬的第五個座標 (例如,數字 1) 加入每一個色彩向量時,您可以使用 5 × 5 矩陣来套用的線性轉換和轉譯的任意組合。If you add a dummy fifth coordinate (for example, the number 1) to each of the color vectors, you can use a 5×5 matrix to apply any combination of linear transformations and translations. 轉換,其中包含後面接著翻譯的線性轉換稱為仿射轉換。A transformation consisting of a linear transformation followed by a translation is called an affine transformation.

例如,假設您想要開始色彩 (0.2,0.0、 0.4,1.0),並套用下列轉換:For example, suppose you want to start with the color (0.2, 0.0, 0.4, 1.0) and apply the following transformations:

  1. 雙重紅色元件Double the red component

  2. 加上紅色、 綠色和藍色元件 0.2Add 0.2 to the red, green, and blue components

下列矩陣乘法會依列出的順序執行成對的轉換。The following matrix multiplication will perform the pair of transformations in the order listed.


色彩矩陣的項目編製索引 (以零為起始) 的資料列,然後資料行。The elements of a color matrix are indexed (zero-based) by row and then column. 比方說,第五個資料列和第三個資料行的矩陣 M 中的項目被以 M [4] [2]。For example, the entry in the fifth row and third column of matrix M is denoted by M[4][2].

5 × 5 身分識別矩陣 (下圖所示) 具有對角線上的 1 和 0 的其他位置。The 5×5 identity matrix (shown in the following illustration) has 1s on the diagonal and 0s everywhere else. 如果您將色彩向量乘以身分識別矩陣時,就不會變更色彩的向量。If you multiply a color vector by the identity matrix, the color vector does not change. 便利的方式來形成 「 色彩 」 轉換的矩陣是以身分識別矩陣開始進行小幅變更會產生所需的轉換。A convenient way to form the matrix of a color transformation is to start with the identity matrix and make a small change that produces the desired transformation.

螢幕擷取畫面 5 x 5 身分識別矩陣的色彩轉換。

矩陣和轉換的詳細討論,請參閱座標系統和轉換For a more detailed discussion of matrices and transformations, see Coordinate Systems and Transformations.


下列範例會為所有的一種色彩 (0.2,0.0、 0.4,1.0) 與先前段落中所述的轉換套用的映像。The following example takes an image that is all one color (0.2, 0.0, 0.4, 1.0) and applies the transformation described in the preceding paragraphs.

下圖顯示原始的映像,在左邊和轉換後的映像,在右邊。The following illustration shows the original image on the left and the transformed image on the right.


下列範例中的程式碼會使用下列步驟執行的重新著色:The code in the following example uses the following steps to perform the recoloring:

  1. 初始化ColorMatrix物件。Initialize a ColorMatrix object.

  2. 建立ImageAttributes物件,並傳遞ColorMatrix物件SetColorMatrix方法ImageAttributes物件。Create an ImageAttributes object and pass the ColorMatrix object to the SetColorMatrix method of the ImageAttributes object.

  3. 傳遞ImageAttributes物件至DrawImage方法Graphics物件。Pass the ImageAttributes object to the DrawImage method of a Graphics object.

Image image = new Bitmap("InputColor.bmp");
ImageAttributes imageAttributes = new ImageAttributes();
int width = image.Width;
int height = image.Height;

float[][] colorMatrixElements = { 
   new float[] {2,  0,  0,  0, 0},        // red scaling factor of 2
   new float[] {0,  1,  0,  0, 0},        // green scaling factor of 1
   new float[] {0,  0,  1,  0, 0},        // blue scaling factor of 1
   new float[] {0,  0,  0,  1, 0},        // alpha scaling factor of 1
   new float[] {.2f, .2f, .2f, 0, 1}};    // three translations of 0.2

ColorMatrix colorMatrix = new ColorMatrix(colorMatrixElements);


e.Graphics.DrawImage(image, 10, 10);

   new Rectangle(120, 10, width, height),  // destination rectangle 
   0, 0,        // upper-left corner of source rectangle 
   width,       // width of source rectangle
   height,      // height of source rectangle
Dim image As New Bitmap("InputColor.bmp")
Dim imageAttributes As New ImageAttributes()
Dim width As Integer = image.Width
Dim height As Integer = image.Height

' The following matrix consists of the following transformations:
' red scaling factor of 2
' green scaling factor of 1
' blue scaling factor of 1
' alpha scaling factor of 1
' three translations of 0.2
Dim colorMatrixElements As Single()() = { _
   New Single() {2, 0, 0, 0, 0}, _
   New Single() {0, 1, 0, 0, 0}, _
   New Single() {0, 0, 1, 0, 0}, _
   New Single() {0, 0, 0, 1, 0}, _
   New Single() {0.2F, 0.2F, 0.2F, 0, 1}}

Dim colorMatrix As New ColorMatrix(colorMatrixElements)

imageAttributes.SetColorMatrix(colorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap)

e.Graphics.DrawImage(image, 10, 10)

e.Graphics.DrawImage( _
   image, _
   New Rectangle(120, 10, width, height), _
   0, _
   0, _
   width, _
   height, _
   GraphicsUnit.Pixel, _

編譯程式碼Compiling the Code

上述範例中專為搭配 Windows Form 使用,而且需要PaintEventArgs e,這是參數的Paint事件處理常式。The preceding example is designed for use with Windows Forms, and it requires PaintEventArgs e, which is a parameter of the Paint event handler.

另請參閱See also