Recent

Author Topic: BGRABitmap gradient along path?  (Read 1491 times)

ϻαϻɾΣɀО

  • Jr. Member
  • **
  • Posts: 54
  • MaMrEzO
BGRABitmap gradient along path?
« on: October 17, 2019, 11:15:21 pm »
Hi,
Is there a way to draw shadow(a dark gradient) along a path/inside a rectangle?
I need it to implement CSS box-shadow for both inner/outer.
Debio-Sql is a new brand of GUI Database tool for the Firebird RDBMS.
http://debio-sql.ariaian.com/

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: BGRABitmap gradient along path?
« Reply #1 on: October 18, 2019, 01:47:10 am »
You can draw the outline in a separate bitmap with the desired color, then apply a blur filter into it. Then position it back inside the round rectangle (your first case) shape or outside (second case) depending on your needs. For the second case you need to draw again the rounded rectangle so it's in top of the shadow.

circular

  • Hero Member
  • *****
  • Posts: 4195
    • Personal webpage
Re: BGRABitmap gradient along path?
« Reply #2 on: October 18, 2019, 04:55:50 pm »
I am not sure about the linear gradient as shadow (your first example). I can't see any gradient. Did you mean that the dark gray filling would instead be a gradient? That can be done using a gradient scanner (BGRAGradientScanner unit) and provide it instead of a solid color to the filling method.

Regarding the outer shadow, as lainz explains, you need to compute the shape in a separate bitmap and blur it. You will find a sample function TextShadow in BGRATextFX unit.

About the inner shadow to make 3D effect, I am not sure, is it that the two inner shadows have a different offset?

« Last Edit: October 18, 2019, 04:59:59 pm by circular »
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: BGRABitmap gradient along path?
« Reply #3 on: November 03, 2019, 08:33:03 pm »
Code: Pascal  [Select][+][-]
  1. procedure TForm1.BGRAGraphicControl1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
  2. var
  3.   border: TBGRABitmap;
  4.   innerLight: TBGRABitmap;
  5.   gradientBackground: TBGRABitmap;
  6. begin
  7.   Bitmap.FillTransparent;
  8.   if (Bitmap.Width > 2) and (Bitmap.Height > 2) then
  9.   begin
  10.     innerLight := TBGRABitmap.Create(Bitmap.Width, Bitmap.Height);
  11.     innerLight.RoundRectAntialias(1, 1, Bitmap.Width - 2, Bitmap.Height - 2,
  12.       5, 5, BGRAWhite, 1);
  13.     BGRAReplace(innerLight, innerLight.FilterBlurRadial(10, 10, rbNormal) as
  14.       TBGRABitmap);
  15.  
  16.     gradientBackground := TBGRABitmap.Create(Bitmap.Width, Bitmap.Height);
  17.     gradientBackground.GradientFill(0, 0, gradientBackground.Width,
  18.       gradientBackground.Height, BGRA(40, 40, 40), BGRA(80, 80, 80), gtLinear,
  19.       PointF(0, 0), PointF(0, gradientBackground.Height), dmSet);
  20.  
  21.     gradientBackground.PutImage(0, 0, innerLight, dmDrawWithTransparency);
  22.  
  23.     border := TBGRABitmap.Create(bitmap.Width, bitmap.Height, BGRABlack);
  24.  
  25.     Bitmap.RoundRectAntialias(0, 0, Bitmap.Width - 1, Bitmap.Height - 1,
  26.       5, 5, border, 1, gradientBackground);
  27.  
  28.     gradientBackground.Free;
  29.     border.Free;
  30.     innerLight.Free;
  31.   end;
  32. end;

 

TinyPortal © 2005-2018