使用Skia4Delphi绘制渐变线

Question

我的表单上有一个

TSkLabel

，这是我的标题，但我想在它下面画一条彩色渐变线。

我只想要一条从一种颜色到另一种颜色的简单线条。也许有多种颜色。就像我的标题下面有一条彩虹渐变分隔线。

如何通过 Skia 实现这一目标？

Answer 1

使用TSKPaintBox.OnDraw您需要使用TSkShader.MakeGradientLinear方法。它需要这些参数

AStart : TPointF;
AEnd : TPointF;
AColors : TArray<System.UlTypes.TAlphaColor>;
APositions : TArray<System.Single>;
ATileMode : TSkTileMode;

制作 AColors 数组：

function TForm20.MakeColorArray( const AColor : TAlphaColor ) : TArray<TAlphaColor>;
  const
    Alpha = $00;
  {var
    TempArray : TArray<TAlphaColor>;}
     
  begin
    { Add more Colors to the array here if needed. I just needed 1 color }
    Result := [ ( AColor and $00FFFFFF ) or ( Alpha shl 24 ), AColor, ( AColor and $00FFFFFF ) or ( Alpha shl 24 )];
  end;

并在 TSkPaintbox.OnDraw 事件中：

procedure TForm20.SkPaintBox1Draw( ASender : TObject; const ACanvas : ISkCanvas; const ADest: TRectF; const AOpacity : Single );
  var
    Shader : ISkShader;
    CentreLinePaint : ISkPaint;
    HighlightLinePaint : ISkPaint;

    CentreLineColors : TArray<TAlphaColor>;
    HighlightLineColors : TArray<TAlphaColor>;
    GradientPositions : TArray<Single>;

  begin
    CentreLineColors := MakeColorArray( $FF45494C ); {This just returns a single TAlhpaColor array}
    HighlightLineColors := MakeColorArray( $FFB5C3CB );
    GradientPositions := [0.0, 0.5, 1.0]; { The stop points for the Gradient }


    CentreLinePaint := TSkPaint.Create; { Create the Shader }
    CentreLinePaint.StrokeWidth := 4;
    CentreLinePaint.AntiAlias := True;
    CentreLinePaint.Style := TSkPaintStyle.Stroke;
    CentreLinePaint.Shader := TSkShader.MakeGradientLinear(
    TPointF.Create(50, 50), TPointF.Create(150, 50), CentreLineColors, GradientPositions, TSkTileMode.Clamp );


    ACanvas.DrawLine(TPointF.Create(50, 50), TPointF.Create(150, 50), CentreLinePaint ); { Draw the line }

    HighlightLinePaint := TSkPaint.Create; { Create another shader }
    HighlightLinePaint.StrokeWidth := 1;
    HighlightLinePaint.AntiAlias := False;
    HighlightLinePaint.Style := TSkPaintStyle.Stroke;
    HighlightLinePaint.Shader := TSkShader.MakeGradientLinear(
    TPointF.Create(50, 50), TPointF.Create(150, 50),
    HighlightLineColors, GradientPositions,
    TSkTileMode.Clamp
  );

    ACanvas.DrawLine( TPointF.Create( 50, 50 - 2), TPointF.Create( 150, 50 - 2 ), HighlightLinePaint ); { Draw some more lines }
    ACanvas.DrawLine( TPointF.Create( 50, 50 + 2 ), TPointF.Create( 150, 50 + 2 ), HighlightLinePaint );

  end;

产生这个：