BGRABitmap - showcase -

[circular]

Hi Mongkey,

I presume you are referring to the blue circular bevel in the image. There isn't a function to do that directly. Though it is doable by using regular drawing functions. There are two circles drawn with a wide pen with a gradient as stroke color.

Regards

[circular]

Here is a showcase in Javascript:
https://jsfiddle.net/qvcps6u2/

Here is the same code using Canvas2d:

Code: Pascal  [Select][+][-]

1. uses BGRABitmap, BGRABitmapTypes, BGRACanvas2D;
2.  
3. {$R *.lfm}
4.  
5. { TForm1 }
6.  
7. procedure TForm1.FormPaint(Sender: TObject);
8. var
9.   bmp: TBGRABitmap;
10.   ctx: TBGRACanvas2D;
11.   gradient: IBGRACanvasGradient2D;
12. begin
13.   bmp := TBGRABitmap.Create(ClientWidth, ClientHeight, StrToBGRA('#E0E2E5'));
14.   ctx := bmp.Canvas2d;
15.  
16.   // Draw the outer rounded rectangle
17.   gradient := ctx.createLinearGradient(100, 20, 100, 180);
18.   gradient.addColorStop(0, 'white');
19.   gradient.addColorStop(1, '#7C878A');
20.   ctx.fillStyle(gradient);
21.   ctx.beginPath();
22.   ctx.roundRect(20, 20, 160, 160, 20);
23.   ctx.save();
24.   ctx.shadowBlur := 10;
25.   ctx.shadowColor('rgba(0,0,0, .8)');
26.   ctx.shadowOffsetX := 0;
27.   ctx.shadowOffsetY := 10;
28.   ctx.fill();
29.   ctx.restore();
30.  
31.   // Draw the blue circle with gradient
32.   gradient := ctx.createLinearGradient(100, 30, 100, 170);
33.   gradient.addColorStop(0, '#CAEBF5');
34.   gradient.addColorStop(1, '#0F5369');
35.   ctx.strokeStyle(gradient);
36.   ctx.beginPath();
37.   ctx.arc(100, 100, 70, 0, Pi * 2);
38.   ctx.lineWidth := 10;
39.   ctx.stroke();
40.  
41.   gradient := ctx.createLinearGradient(100, 50, 100, 150);
42.   gradient.addColorStop(0, '#003C50');
43.   gradient.addColorStop(1, '#53E6FF');
44.   ctx.strokeStyle(gradient);
45.   ctx.beginPath();
46.   ctx.arc(100, 100, 60, 0, Pi * 2);
47.   ctx.lineWidth := 10;
48.   ctx.stroke();
49.  
50.   bmp.Draw(Canvas, 0,0, true);
51.   bmp.Free;
52. end;

[dseligo]

Here is a showcase in Javascript:
https://jsfiddle.net/qvcps6u2/

Here is the same code using Canvas2d:

Nice. Unit 'BGRACanvas2D' must also be added in uses for code to compile.

[circular]

Thanks @dseligo. I've added to the uses clause accordingly.

[Mongkey]

Thank you @dseligo @circular, i tought a final conclusion, do we could use all js canvas2d ability in bgrabitmap canvas2d? If yes i would browsing a lot jsfidle to save my time 

[circular]

Yes, @Mongkey, whatever you can do with JS canvas2d, you can do with BGRABitmap Canvas2D.

[Mongkey]

Thank you @circular, and finally on LAMW. But i found another problem on canvas2d.textout, seems got no freetype, as i know freetype only on LCL, LAMW only work on FCL:

Code: Pascal  [Select][+][-]

1. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E  An unhandled exception occurred at $C413A95C:
2. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E  Exception: LazFreeType not available
3. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C413A95C
4. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C4179544
5. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C4188AC4
6. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C40E8000
7. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C409EF0C
8. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C409D614
9. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C408FA8C
10. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C408A710
11. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $C403DE60
12. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E    $EA3B351B
13. 2023-12-09 08:54:14.925 28953-28953 libcontrols.so          mighty.old.test                   E  
14.  

another   

Code: Pascal  [Select][+][-]

1. ctx.text('wedus', 100,100);

also got the same error.

Thank you.

[circular]

Indeed. LazFreeType is not included by default. Though it doesn't need LCL as shown in the following discussion:
https://forum.lazarus.freepascal.org/index.php?topic=21923.0

I've just made for you a package for Android called BGRABitmapPack4Android_FreeType that uses LazFreeType (in fact the package is called freetypelaz.lpk). It is on the dev branch of BGRABitmap:
https://github.com/bgrabitmap/bgrabitmap/tree/dev-bgrabitmap

You can download the whole thing with the green Code button. Though there are only two files that you really need to add:
bgrabitmap/bgrabitmappack4android_freetype.lpk
bgrabitmap/bgrabitmappack4android_freetype.pas

The BGRABitmapPack4Android_FreeType package connects to the lazfreetype package. If the lazfreetype package is not automatically found, you can find it in lazarus\components\freetype folder.

As resources are not available as files on Android, the way is to register the font via streams.

Code: Pascal  [Select][+][-]

1. uses ..., EasyLazFreeType;
2. var resourceStream: TStream;
3. begin
4.   ...
5.   // get Arial or Helvetica asset in resourceStream variable
6.   FontCollection.AddStream(resourceStream, True);

If you make a simple sample program, can you share it here? I could add it to BGRABitmap package examples to help people in their first steps. 

[Mongkey]

  no success even i already add easylazfreetype

[circular]

Hi Mongkey,

It seems the problem here is related to finding the resource.

I don't know about how to add them to an Android project. There are some threads about it, suggesting that one can add them as RES or LRS:
https://forum.lazarus.freepascal.org/index.php?topic=17205.0

Or simply by adding the file in the Assets folder and using AssetManager:
https://forum.lazarus.freepascal.org/index.php?topic=45238.0

It seems you've added the file Courier-prime.ttf in the Assets folder, so maybe to access it you need to use AssetManager.

Regards