实现任意角度渐变填充(二) -- 多色渐变填充矩形

    在《实现任意角度渐变填充(一) -- 双色渐变填充矩形》一文中，比较详细的阐述了任意角度双色渐变填充矩形的原理，同时也用Delphi实现了填充过程，本文在此基础上，继续实现对矩形的任意角度多色渐变填充。

    其实，任意角度多色渐变填充与任意角度双色渐变填充在实现原理上没有什么不同，填充过程也是完全相同的，只需要修改一下设置颜色缓冲区的代码，将按长度比例计算2种颜色缓冲区各元素颜色值，改为按多种填充颜色分段后，按各自的长度比例计算其在颜色缓冲区各元素颜色值就行了。

    下面是修改过的获取颜色缓冲区的过程代码：

// 计算Colors在颜色缓冲区各元素的颜色值, 返回颜色缓冲区 function GetGradientColors(var Data: TFillData; const Colors: array of LongWord; const Positions: array of Single): TColorBuffer; procedure SetColors(Buffer: PARGBQuad; Size: Integer; Color1, Color2: TARGBQuad); var I: Integer; Delta: Integer; Cumulate: Integer; p: PARGBQuad; begin Delta := Round((1 shl 24) / Size); Cumulate := Delta * Size; p := Buffer; I := 0; while I < Cumulate do begin p.Alpha := ((I * (Color2.Alpha - Color1.Alpha)) shr 24) + Color1.Alpha; p.Red := ((I * (Color2.Red - Color1.Red)) shr 24) + Color1.Red; p.Green := ((I * (Color2.Green - Color1.Green)) shr 24) + Color1.Green; p.Blue := ((I * (Color2.Blue - Color1.Blue)) shr 24) + Color1.Blue; // 转换PARGB格式为ARGB格式 if (p.Alpha > 0) and (p.Alpha < 255) then begin p.Red := p.Red * 255 div p.Alpha; p.Green := p.Green * 255 div p.Alpha; p.Blue := p.Blue * 255 div p.Alpha; end; Inc(I, Delta); Inc(p); end; end; var I, Len, Size: Integer; Poss: array of Integer; p: PARGBQuad; begin Size := (Data.Width * Data.xDelta + Data.Height * Data.yDelta) shr 8; SetLength(Result, Size); SetLength(Poss, Length(Positions)); Data.AlphaBlend := False; p := PARGBQuad(@Colors[0]); for I := Low(Poss) to High(Poss) do begin Poss[I] := Round(Positions[I] * Size); // ARGB格式转换为PARGB格式 if p.Alpha <> 255 then begin p.Red := p.Alpha * p.Red div 255; p.Green := p.Alpha * p.Green div 255; p.Blue := p.Alpha * p.Blue div 255; Data.AlphaBlend := True; end; Inc(p); end; p := @Result[0]; Len := High(Colors) - 1; if Data.InvertColors then begin for I := Len downto 0 do begin Size := Poss[I + 1] - Poss[I]; SetColors(p, Size, TARGBQuad(Colors[I + 1]), TARGBQuad(Colors[I])); Inc(p, Size); end; end else begin for I := 0 to Len do begin Size := Poss[I + 1] - Poss[I]; SetColors(p, Size, TARGBQuad(Colors[I]), TARGBQuad(Colors[I + 1])); Inc(p, Size); end; end; end;

    从上面的代码可以看出，GetGradientColors过程中的子过程SetColors其实就是《实现任意角度渐变填充(一) -- 双色渐变填充矩形》中的SetGradientColors过程（重组前的设置双色填充缓冲区过程），GetGradientColors过程只是将多种填充颜色，按其在矩形填充的位置比例重复调用设置双色填充颜色而已。

    下面是任意角度多色渐变填充矩形的全部代码：

type PARGBQuad = ^TARGBQuad; TARGBQuad = packed record case Integer of 0: (Color: LongWord); 1: (Blue, Green, Red, Alpha: Byte); 2: (Argb: array[0..3] of Byte); end; TColorBuffer = array of TARGBQuad; PFillData = ^TFillData; TFillData = packed record Width: Integer; // 宽度 Height: Integer; // 高度 Scan0: Pointer; // 扫描线首地址 PScan0: PARGBQuad; // 扫描线指针（填充起始像素地址） ScanDelta: Integer; // 扫描线指针增量 ScanOffset: Integer; // 扫描线指针偏移 xDelta: Integer; // 列增量 yDelta: Integer; // 行增量 AllocScan0: Boolean; // 是否分配扫描线 AlphaBlend: Boolean; // 填充颜色是否含Alpha信息 InvertColors: Boolean; // 是否颠倒填充颜色 end; function GetFillData(Width, Height, Stride: Integer; Scan0: Pointer; Angle: Single): TFillData; var n: Integer; begin n := Trunc(Angle / 90); Angle := (Angle - 90 * n) * PI / 180; Result.xDelta := Round(Cos(Angle) * 256); Result.yDelta := Round(Sin(Angle) * 256); if Stride <= 0 then Stride := Width shl 2; if Scan0 = nil then begin GetMem(Result.Scan0, Height * Stride); Result.AllocScan0 := True; end else begin Result.Scan0 := Scan0; Result.AllocScan0 := False; end; Result.PScan0 := Result.Scan0; if (n and 1) = 0 then begin Result.Width := Width; Result.Height := Height; Result.ScanDelta := 4; Result.ScanOffset := Stride; end else begin Result.Width := Height; Result.Height := Width; Result.ScanDelta := Stride; Result.ScanOffset := -4; Inc(Result.PScan0, Width - 1); end; Result.InvertColors := (n mod 4) > 1; end; procedure FreeFillData(var Data: TFillData); begin if Data.AllocScan0 then begin FreeMem(Data.Scan0); Data.AllocScan0 := False; end; end; // 计算Colors在颜色缓冲区各元素的颜色值, 返回颜色缓冲区 function GetGradientColors(var Data: TFillData; const Colors: array of LongWord; const Positions: array of Single): TColorBuffer; procedure SetColors(Buffer: PARGBQuad; Size: Integer; Color1, Color2: TARGBQuad); var I: Integer; Delta: Integer; Cumulate: Integer; p: PARGBQuad; begin Delta := Round((1 shl 24) / Size); Cumulate := Delta * Size; p := Buffer; I := 0; while I < Cumulate do begin p.Alpha := ((I * (Color2.Alpha - Color1.Alpha)) shr 24) + Color1.Alpha; p.Red := ((I * (Color2.Red - Color1.Red)) shr 24) + Color1.Red; p.Green := ((I * (Color2.Green - Color1.Green)) shr 24) + Color1.Green; p.Blue := ((I * (Color2.Blue - Color1.Blue)) shr 24) + Color1.Blue; if (p.Alpha > 0) and (p.Alpha < 255) then begin p.Red := p.Red * 255 div p.Alpha; p.Green := p.Green * 255 div p.Alpha; p.Blue := p.Blue * 255 div p.Alpha; end; Inc(I, Delta); Inc(p); end; end; var I, Len, Size: Integer; Poss: array of Integer; p: PARGBQuad; begin Size := (Data.Width * Data.xDelta + Data.Height * Data.yDelta) shr 8; SetLength(Result, Size); SetLength(Poss, Length(Positions)); Data.AlphaBlend := False; p := PARGBQuad(@Colors[0]); for I := Low(Poss) to High(Poss) do begin Poss[I] := Round(Positions[I] * Size); if p.Alpha <> 255 then begin p.Red := p.Alpha * p.Red div 255; p.Green := p.Alpha * p.Green div 255; p.Blue := p.Alpha * p.Blue div 255; Data.AlphaBlend := True; end; Inc(p); end; p := @Result[0]; Len := High(Colors) - 1; if Data.InvertColors then begin for I := Len downto 0 do begin Size := Poss[I + 1] - Poss[I]; SetColors(p, Size, TARGBQuad(Colors[I + 1]), TARGBQuad(Colors[I])); Inc(p, Size); end; end else begin for I := 0 to Len do begin Size := Poss[I + 1] - Poss[I]; SetColors(p, Size, TARGBQuad(Colors[I]), TARGBQuad(Colors[I + 1])); Inc(p, Size); end; end; end; procedure LinearFillRect(const Data: TFillData; const ColorBuf: TColorBuffer); var x, y, x0, y0: Integer; p, p0: PARGBQuad; c: TARGBQuad; begin p0 := Data.PScan0; y0 := 0; // Alpha填充 if Data.AlphaBlend then begin for y := 1 to Data.Height do begin x0 := y0; p := p0; for x := 1 to Data.Width do begin c := ColorBuf[x0 shr 8]; p.Alpha := ((c.Alpha * (c.Alpha - p.Alpha)) shr 8) + p.Alpha; p.Red := ((c.Alpha * (c.Red - p.Red)) shr 8) + p.Red; p.Green := ((c.Alpha * (c.Green - p.Green)) shr 8) + p.Green; p.Blue := ((c.Alpha * (c.Blue - p.Blue)) shr 8) + p.Blue; Inc(Integer(p), Data.ScanDelta); Inc(x0, Data.xDelta); end; Inc(Integer(p0), Data.ScanOffset); Inc(y0, Data.yDelta); end; end // 拷贝填充 else begin for y := 1 to Data.Height do begin x0 := y0; p := p0; for x := 1 to Data.Width do begin p.Color := ColorBuf[x0 shr 8].Color; Inc(Integer(p), Data.ScanDelta); Inc(x0, Data.xDelta); end; Inc(Integer(p0), Data.ScanOffset); Inc(y0, Data.yDelta); end; end; end; function GetBitmapInfoHeader(Width, Height: Integer): TBitmapInfoHeader; begin Result.biSize := Sizeof(TBitmapInfoHeader); Result.biWidth := Width; Result.biHeight := Height; Result.biPlanes := 1; Result.biBitCount := 32; Result.biCompression := BI_RGB; end; function GetFillDataFromCanvas(Canvas: TCanvas; Rect: TRect; Angle: Single; var bmi: TBitmapInfo): TFillData; var saveBitmap, Bitmap: HBITMAP; memDC: HDC; Width, Height: Integer; begin Width := Rect.Right - Rect.Left; Height := Rect.Bottom - Rect.Top; Result := GetFillData(Width, Height, 0, nil, 360 - Angle); Bitmap := CreateCompatibleBitmap(Canvas.Handle, Width, Height); memDC := CreateCompatibleDC(Canvas.Handle); try // 获取画布的32位位图数据到Scan0 saveBitmap := SelectObject(memDC, Bitmap); BitBlt(memDC, 0, 0, Width, Height, Canvas.Handle, Rect.Left, Rect.Top, SRCCOPY); SelectObject(memDC, saveBitmap); bmi.bmiHeader := GetBitmapInfoHeader(Width, Height); GetDIBits(Canvas.Handle, Bitmap, 0, Height, Result.Scan0, bmi, DIB_RGB_COLORS); finally DeleteDC(memDC); DeleteObject(Bitmap); end; end; procedure CopyFillDataToCanvas(Canvas: TCanvas; Rect: TRect; Scan0: Pointer; bmi: TBitmapInfo); var saveBitmap, Bitmap: HBITMAP; memDC: HDC; begin Bitmap := CreateDIBItmap(Canvas.Handle, bmi.bmiHeader, CBM_INIT, Scan0, bmi, DIB_RGB_COLORS); memDC := CreateCompatibleDC(Canvas.Handle); saveBitmap := SelectObject(memDC, Bitmap); try BitBlt(Canvas.Handle, Rect.Left, Rect.Top, bmi.bmiHeader.biWidth, bmi.bmiHeader.biHeight, memDC, 0, 0, SRCCOPY); finally SelectObject(memDC, saveBitmap); DeleteDC(memDC); DeleteObject(Bitmap); end; end; // 多色渐变填充矩形。参数：画布，矩形，填充颜色数组，渐变位置数组，角度 // 注：Positions各元素值是介于0-1之间的、递增的数值，头尾元素值必须为0和1 procedure LinearGradientFillRect(Canvas: TCanvas; Rect: TRect; const Colors: array of LongWord; const Positions: array of Single; Angle: Single); overload; var bmi: TBitmapInfo; Data: TFillData; ColorBuf: TColorBuffer; begin // 如果填充矩形无效或者画布无效，退出 if IsRectEmpty(Rect) or IsRectEmpty(Canvas.ClipRect) then Exit; Data := GetFillDataFromCanvas(Canvas, Rect, Angle, bmi); try // 获取渐变颜色数据 ColorBuf := GetGradientColors(Data, Colors, Positions); // 渐变填充位图数据 LinearFillRect(Data, ColorBuf); CopyFillDataToCanvas(Canvas, Rect, Data.Scan0, bmi); finally FreeFillData(Data); end; end; // 多色渐变填充矩形。参数：窗口句柄，矩形，填充颜色数组，渐变位置数组，角度 // 注：Positions各元素值是介于0-1之间的、递增的数值，头尾元素值必须为0和1 procedure LinearGradientFillRect(Handle: THandle; Rect: TRect; const Colors: array of LongWord; const Positions: array of Single; Angle: Single); overload; var Canvas: TCanvas; DC: HDC; begin Canvas := TCanvas.Create; DC := GetDC(Handle); try Canvas.Handle := DC; LinearGradientFillRect(Canvas, Rect, Colors, Positions, Angle); finally Canvas.Free; ReleaseDC(Handle, DC); end; end;

    由于任意角度双色渐变填充矩形过程只是任意角度多色渐变填充矩形的特例，所以任意角度双色渐变填充矩形过程可以写为下面的形式，而不必在写专门的任意角度双色渐变填充矩形过程，不过，如果想搞清楚渐变填充原理和实现代码的演变过程，还是应该参考《实现任意角度渐变填充(一) -- 双色渐变填充矩形》一文。

// 双色渐变填充矩形。参数：画布，矩形，填充颜色，角度 procedure LinearGradientFillRect(Canvas: TCanvas; Rect: TRect; Color1, Color2: LongWord; Angle: Single); overload; begin LinearGradientFillRect(Canvas, Rect, [Color1, Color2], [0, 1], Angle); end; // 双色渐变填充矩形。参数：窗口句柄，矩形，填充颜色，角度 procedure LinearGradientFillRect(Handle: THandle; Rect: TRect; Color1, Color2: LongWord; Angle: Single); overload; begin LinearGradientFillRect(Handle, Rect, [Color1, Color2], [0, 1], Angle); end;

    为了更进一步提高填充速度，下面也给出LinearFillRect过程的BASM代码：

procedure LinearFillRect(const Data: TFillData; const ColorBuf: TColorBuffer); var xDelta, yDelta, ScanDelta, ScanOffset, Height: Integer; asm push esi push edi push ebx mov edi, [eax].TFillData.PScan0 mov ecx, [eax].TFillData.Width mov esi, edx mov edx, [eax].TFillData.Height mov Height, edx mov edx, [eax].TFillData.xDelta mov xDelta, edx mov edx, [eax].TFillData.yDelta mov yDelta, edx mov edx, [eax].TFillData.ScanDelta mov ScanDelta, edx mov edx, [eax].TFillData.ScanOffset mov ScanOffset, edx xor ebx, ebx cmp [eax].TFillData.AlphaBlend, False je @@1 pxor mm7, mm7 @yLoop: push ecx push edi mov edx, ebx @xLoop: mov eax, edx shr eax, 8 movd mm0, [esi + eax * 4] movd mm1, [edi] // mm1 = 00 00 00 00 Ad Rd Gd Bd punpcklbw mm0, mm7 // mm0 = 00 As 00 Rs 00 Gs 00 Bs punpcklbw mm1, mm7 // mm1 = 00 Ad 00 Rd 00 Gd 00 Bd movq mm2, mm0 punpckhwd mm2, mm2 punpckhdq mm2, mm2 // mm2 = Alpha Alpha Alpha Alpha psubw mm0, mm1 // mm0 = As-Ad Rs-Rd Gs-Gd Bs-Bd pmullw mm0, mm2 // mm0 = As*Alpha Rs*Alpha Gs*Alpha Bs*Alpha psllw mm1, 8 // mm1 = Ad*256 Rd*256 Gd*256 Bd*256 paddw mm0, mm1 // mm0 = 00 An 00 Rn 00 Gn 00 Bn psrlw mm0, 8 // mm0 = An/256 Rn/256 Gn/256 Bn/256 packuswb mm0, mm7 // mm0 = 00 00 00 00 An Rn Gn Bn movd [edi], mm0 add edi, ScanDelta add edx, xDelta loop @xLoop pop edi pop ecx add edi, ScanOffset add ebx, yDelta dec Height jnz @yLoop emms jmp @end @@1: @yLoop1: push ecx push edi mov edx, ebx @xLoop1: mov eax, edx shr eax, 8 mov eax, [esi + eax * 4] mov [edi], eax add edi, ScanDelta add edx, xDelta loop @xLoop1 pop edi pop ecx add edi, ScanOffset add ebx, yDelta dec Height jnz @yLoop1 @end: pop ebx pop edi pop esi end;

    使用LinearFillRect的纯pas代码过程，在我的p4 2.8G 单核处理器计算机上，模拟填充千万象素大小矩形，实拷贝填充时间为47ms，而Alpha填充时间则为243ms；而采用LinearFillRect的BASM过程填充千万象素大小矩形测试时间分别为31ms和78ms。可以看出，BASM过程对实拷贝填充速度提升并不大，只有50%，而对Alpha填充而言，填充速度提升还是很可观的，是纯pas代码填充过程的3倍多。以这样的填充速度去填充程序矩形界面，应该还是较满意的，毕竟一般的显示屏，填充整屏也就几十至一百万左右的象素数量。

   本文的内容也适用于对图像矩形的多色渐变填充，只不过要进行一些数据转换，如对本人的《Delphi图像处理》系列文章里使用的图像数据结构的任意角度多色渐变填充矩形过程就可以是下面的形式：

// 多色渐变填充矩形。参数：图像数据，填充颜色数组，渐变位置数组，角度 // 注：Positions各元素值是介于0-1之间的、递增的数值，头尾元素值必须为0和1 procedure LinearGradientFillRect(Data: TImageData; const Colors: array of LongWord; const Positions: array of Single; Angle: Single); overload; var FillData: TFillData; ColorBuf: TColorBuffer; begin if ImageEmpty(Data) then Exit; if Data.InvertLine then Angle := 360 - Angle; FillData := GetFillData(Data.Width, Data.Height, Data.Stride, Data.Scan0, Angle); // 获取渐变颜色数据 ColorBuf := GetGradientColors(FillData, Colors, Positions); // 渐变填充位图数据 LinearFillRect(FillData, ColorBuf); end;

    上面代码中的数据类型TImageData及图像数据转换过程见《Delphi图像处理 -- 数据类型及内部过程》和《Delphi图像处理 -- 图像像素结构与图像数据转换》。如果使用《Delphi图像处理 -- 图像像素结构与图像数据转换》中的GetSubImageData过程也可实现图像的局部矩形填充。

    下面是个调用多色渐变填充矩形过程填充窗口矩形的简单例子：

begin LinearGradientFillRect(Canvas, Rect(0, 0, 200, 100), [$FF008000, $FFFFFF00, $FFFF0000, $FF0000FF, $FFFFA500], [0, 0.25, 0.5, 0.75, 1], 45); LinearGradientFillRect(Canvas, Rect(200, 0, 400, 100), [$FF008000, $FFFFFF00, $FFFF0000, $FF0000FF, $FFFFA500], [0, 0.25, 0.5, 0.75, 1], 135); LinearGradientFillRect(Canvas, Rect(0, 100, 200, 200), [$FF008000, $FFFFFF00, $FFFF0000, $FF0000FF, $FFFFA500], [0, 0.25, 0.5, 0.75, 1], 315); LinearGradientFillRect(Canvas, Rect(200, 100, 400, 200), [$FF008000, $FFFFFF00, $FFFF0000, $FF0000FF, $FFFFA500], [0, 0.25, 0.5, 0.75, 1], 225); end;

   例子运行界面截图如下：

    指导和建议请来信：mao.maozefa@gmail.com，maozefa@hotmail.com

    后记：本文的填充过程支持ARGB颜色填充，GetGradientColors过程就是采用常规ARGB合成方法计算的颜色缓冲区各元素的颜色值，后经CSDN网友winnuke指出：如果填充颜色的Alpha小于255时，按常规ARGB合成方法计算的颜色会导致人眼视觉偏差，必须先将颜色的RGB按Alpha进行预乘，即转换为PARGB格式后进行合成，合成完毕后再转换回ARGB格式（见《http://topic.csdn.net/u/20091118/20/4f96e8c5-dcea-41ae-ac07-492526462b9d.html?64533》）。为此，本文对GetGradientColors进行了修改，但《实现任意角度渐变填充(一) -- 双色渐变填充矩形》一文中的SetGradientColors没作修改，因为那篇文章的内容只是作为本文的导入篇，就让它保持原貌吧。在这里再次对网友winnuke表示感谢！