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

    在实现任意角度双色渐变填充矩形之前，先了解一下简单实现横向或者纵向的双色渐变填充矩形的过程：首先按2种颜色在x（或者y）方向的按长度比例填充一条直线，然后，不断移动y（或者x）坐标，反复复制该直线，直到达到矩形的高（宽度），如此就实现了整个矩形的填充过程。按照这个原理，同样也可实现矩形的任意角度双色渐变填充，只不过比较麻烦，我们先按以下思路来实现：

    1、按给定的渐变角度，计算出矩形中的最长的直线长度，计算公式为：

         maxsize = width * cos(angle) + height * sin(angle)

其中，width和height分别为矩形的宽度和高度，angle为渐变角度；

    2、根据计算的最大直线长度建立一个填充内存缓冲区（颜色数组），然后按直线长度比例计算出2种颜色在缓冲区中各元素的颜色值；

    3、按照与前面相同的计算公式，计算矩形内每个坐标点（x,y）在缓冲区的位置（公式中的width和height分别替换为x和y），逐点复制缓冲区颜色值在当前坐标点，直至整个矩形填充完毕。

    但是，由于矩形是平面，而颜色缓冲区只是一条直线，按上面公式计算的颜色缓冲区位置，只能正常实现0 - 90度（第一象限）的渐变填充，填充其它三个象限时，矩形平面各坐标点与直线颜色缓冲区各元素值并不能一一对应。

    可以考虑把任意填充角度转换为第一象限角度，将矩形内各坐标点旋转相应的角度（如填充第二象限就将坐标点旋转90度），这样矩形平面与直线颜色缓冲区的问题就可以解决。再可以考虑在180 - 360度角度填充时，把2种填充颜色颠倒过来，如此，就只需实现第一、二象限角度的填充，问题的复杂度就小多了。

    可能有朋友会说我把问题搞复杂化了：完全可以在填充每个象素点的同时，按照填充角度逐点比例计算2种颜色在该坐标点的颜色值。不错，这样问题可能会简单些，但由于填充颜色比例是在具体的象素填充过程中计算的，这种方法实现的填充速度肯定不会太快，而按照我前面的思路，只是事先按比例计算一条直线的填充颜色放在颜色缓冲区中，在具体象素填充循环中，只需要计算一下颜色缓冲区下标，这样实现的代码在填充速度上绝不比简单的横向或者纵向的双色渐变填充矩形速度逊色多少，而且我在实现具体象素填充时，将完全抛弃缓慢的浮点数运算。

    以下是用Delphi按上述思路实现的任意角度双色渐变填充矩形的代码：

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; // 按长度Size比例计算Color1, Color2在颜色缓冲区ColorBuf的各元素的颜色值 procedure SetGradientColors(ColorBuf: PARGBQuad; Size: Integer; Color1, Color2: TARGBQuad); var I: Integer; Delta: Integer; Cumulate: Integer; p: PARGBQuad; begin // Delta = 256 / Size * 65536，256为最大Alpha，65536为最大颜色缓冲区长度 Delta := Round((1 shl 24) / Size); Cumulate := Delta * Size; p := ColorBuf; I := 0; while I < Cumulate do begin // p^ = alpha * (color2 - color1) + color1 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; Inc(I, Delta); Inc(p); end; end; // 渐变填充过程，参数：宽度，高度，扫瞄线长度，扫描线地址，填充颜色，角度 procedure LinearGradientFill(Width, Height, Stride: Integer; Scan0: Pointer; Color1, Color2: LongWord; Angle: Single); var x, y, x0, y0: Integer; n, Size: Integer; cosI, sinI: Integer; Offset: LongWord; ColorBuf: array of TARGBQuad; p, p0: PARGBQuad; begin // n = 角度的象限 n := Trunc(Angle / 90); // Angle转换为第一象限的弧度 Angle := (Angle - 90 * n) * PI / 180; cosI := Round(Cos(Angle) * 256); sinI := Round(Sin(Angle) * 256); // 计算颜色缓冲区长度，即按Angle旋转后的最大直线长度 if (n and 1) = 0 then Size := (Width * cosI + Height * sinI) shr 8 // 第一象限颜色缓冲区长度 else Size := (Width * sinI + Height * cosI) shr 8; // 第二象限颜色缓冲区长度 SetLength(ColorBuf, Size); if (n mod 4) < 2 then SetGradientColors(@ColorBuf[0], Size, TARGBQuad(Color1), TARGBQuad(Color2)) else // 第三、四象限角度时颜色反向，转化为第一、二象限角度的渐变填充 SetGradientColors(@ColorBuf[0], Size, TARGBQuad(Color2), TARGBQuad(Color1)); // 处理第一象限角度的渐变填充 if (n and 1) = 0 then begin y0 := 0; p := Scan0; Offset := Stride - (Width shl 2); for y := 1 to Height do begin x0 := y0; for x := 1 to Width do begin p.Color := ColorBuf[x0 shr 8].Color; Inc(p); Inc(x0, cosI); end; Inc(Integer(p), Offset); Inc(y0, sinI); end; end // 处理第二象限角度的渐变填充 else begin x0 := 0; Stride := Width shl 2; p0 := PARGBQuad(Integer(Scan0) + Stride - 4); for x := 1 to Width do begin y0 := x0; p := p0; for y := 1 to Height do begin p.Color := ColorBuf[y0 shr 8].Color; Inc(Integer(p), Stride); Inc(y0, cosI); end; Dec(p0); Inc(x0, sinI); end; end; end; // 渐变填充矩形。参数：画布，矩形，填充颜色，角度 procedure LinearGradientFillRect(Canvas: TCanvas; Rect: TRect; Color1, Color2: LongWord; Angle: Single); overload; var saveBitmap, Bitmap: HBITMAP; memDC: HDC; bmi: TBitmapInfo; Scan0: Pointer; Width, Height, Stride: Integer; begin // 如果填充矩形无效或者画布无效，退出 if IsRectEmpty(Rect) or IsRectEmpty(Canvas.ClipRect) then Exit; Width := Rect.Right - Rect.Left; Height := Rect.Bottom - Rect.Top; Stride := Width shl 2; GetMem(Scan0, Height * Stride); memDC := CreateCompatibleDC(Canvas.Handle); try Bitmap := CreateCompatibleBitmap(Canvas.Handle, Width, Height); 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.biSize := Sizeof(TBitmapInfoHeader); bmi.bmiHeader.biWidth := Width; bmi.bmiHeader.biHeight := Height; bmi.bmiHeader.biPlanes := 1; bmi.bmiHeader.biBitCount := 32; bmi.bmiHeader.biCompression := BI_RGB; GetDIBits(Canvas.Handle, Bitmap, 0, Height, Scan0, bmi, DIB_RGB_COLORS); finally DeleteObject(Bitmap); end; // 渐变填充位图数据 LinearGradientFill(Width, Height, Stride, Scan0, Color1, Color2, 360 - Angle); // 将渐变填充的位图数据拷贝到画布 Bitmap := CreateDIBItmap(Canvas.Handle, bmi.bmiHeader, CBM_INIT, Scan0, bmi, DIB_RGB_COLORS); saveBitmap := SelectObject(memDC, Bitmap); try BitBlt(Canvas.Handle, Rect.Left, Rect.Top, Width, Height, memDC, 0, 0, SRCCOPY); finally SelectObject(memDC, saveBitmap); DeleteObject(Bitmap); end; finally DeleteDC(memDC); FreeMem(Scan0); end; end; // 渐变填充矩形。参数：窗口句柄，矩形，填充颜色，角度 procedure LinearGradientFillRect(Handle: THandle; Rect: TRect; Color1, Color2: LongWord; Angle: Single); overload; var Canvas: TCanvas; DC: HDC; begin Canvas := TCanvas.Create; DC := GetDC(Handle); try Canvas.Handle := DC; LinearGradientFillRect(Canvas, Rect, Color1, Color2, Angle); finally Canvas.Free; ReleaseDC(Handle, DC); end; end;

    上面的填充代码实现主要是靠SetGradientColors和LinearGradientFill过程实现的，前者负责计算颜色缓冲区各元素的颜色值，后者则实现整个矩形填充过程，由于文章前面已经介绍了实现思路和步骤，代码中也有较详细的注释，就不再继续介绍了。

    上面的代码只是实现了矩形的双色实填充（拷贝），而没有实现带Alpha，即ARGB颜色的填充，因此是不完善的。但是，要实现ARGB颜色填充，将会使填充速度大大下降，而事实上使用ARGB颜色填充矩形的时候不是很多，而如果把RGB填充和ARGB填充过程分开来，倒是可以解决这个矛盾，可是上面已经是分别处理第一、二象限的代码，再来个RGB和ARGB分别处理，组合起来也很复杂，所以我把上面分别处理第一、二象限的2段代码统一起来（因为2段代码的流程差不多，不同的只是图像象素指针和增减量），再考虑到上面的代码不利于扩展（下一篇文章会扩展为多色填充），因此，下面给出重组、细化和功能扩充过的双色渐变填充矩形过程代码：

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; // 计算Color1, Color2在颜色缓冲区各元素的颜色值, 返回颜色缓冲区 function GetGradientColors(var Data: TFillData; Color1, Color2: LongWord) : TColorBuffer; var I, Size: Integer; Delta: Integer; Cumulate: Integer; p: PARGBQuad; c1, c2: TARGBQuad; begin Size := (Data.Width * Data.xDelta + Data.Height * Data.yDelta) shr 8; SetLength(Result, Size); // Delta = 256 / Size * 65536，256为最大Alpha，65536为最大颜色缓冲区长度 Delta := Round((1 shl 24) / Size); Cumulate := Delta * Size; if Data.InvertColors then begin c1 := TARGBQuad(Color2); c2 := TARGBQuad(Color1); end else begin c1 := TARGBQuad(Color1); c2 := TARGBQuad(Color2); end; p := @Result[0]; I := 0; while I < Cumulate do begin // p^ = alpha * (color2 - color1) + color1 p.Alpha := ((I * (c2.Alpha - c1.Alpha)) shr 24) +c1.Alpha; p.Red := ((I * (c2.Red - c1.Red)) shr 24) + c1.Red; p.Green := ((I * (c2.Green - c1.Green)) shr 24) + c1.Green; p.Blue := ((I * (c2.Blue - c1.Blue)) shr 24) + c1.Blue; Inc(I, Delta); Inc(p); end; Data.AlphaBlend := (Color1 shr 24 <> 255) or (Color2 shr 24 <> 255); 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; // 渐变填充矩形。参数：画布，矩形，填充颜色，角度 procedure LinearGradientFillRect(Canvas: TCanvas; Rect: TRect; Color1, Color2: LongWord; 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, Color1, Color2); // 渐变填充位图数据 LinearFillRect(Data, ColorBuf); CopyFillDataToCanvas(Canvas, Rect, Data.Scan0, bmi); finally FreeFillData(Data); end; end; // 渐变填充矩形。参数：窗口句柄，矩形，填充颜色，角度 procedure LinearGradientFillRect(Handle: THandle; Rect: TRect; Color1, Color2: LongWord; Angle: Single); overload; var Canvas: TCanvas; DC: HDC; begin Canvas := TCanvas.Create; DC := GetDC(Handle); try Canvas.Handle := DC; LinearGradientFillRect(Canvas, Rect, Color1, Color2, Angle); finally Canvas.Free; ReleaseDC(Handle, DC); end; end;

    上面的填充过程，在我的p4 2.8G 单核处理器计算机上（比较老了），模拟填充千万象素大小矩形，实拷贝填充时间为47ms，而Alpha填充时间则为243ms。

    下面是调用双色渐变填充矩形过程的例子和运行截图：

begin LinearGradientFillRect(Canvas, Rect(0, 0, 200, 100), $FFFFFF00, $FFFF0000, 45); LinearGradientFillRect(Handle, Rect(0, 100, 200, 200), $FF00FFFF, $FF00FF00, 315); end;

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