### Bookstore

 Computer Math and Games in Pascal (preview) Lazarus Handbook

### Author Topic: BGRABitmap - showcase -  (Read 3774 times)

#### circular

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #15 on: December 07, 2023, 10:43:53 am »
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
Conscience is the debugger of the mind

#### circular

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #16 on: December 07, 2023, 11:35:16 am »
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;
12. begin
13.   bmp := TBGRABitmap.Create(ClientWidth, ClientHeight, StrToBGRA('#E0E2E5'));
14.   ctx := bmp.Canvas2d;
15.
16.   // Draw the outer rounded rectangle
21.   ctx.beginPath();
22.   ctx.roundRect(20, 20, 160, 160, 20);
23.   ctx.save();
28.   ctx.fill();
29.   ctx.restore();
30.
31.   // Draw the blue circle with gradient
36.   ctx.beginPath();
37.   ctx.arc(100, 100, 70, 0, Pi * 2);
38.   ctx.lineWidth := 10;
39.   ctx.stroke();
40.
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;
« Last Edit: December 08, 2023, 12:08:41 am by circular »
Conscience is the debugger of the mind

#### dseligo

• Hero Member
• Posts: 1149
##### Re: BGRABitmap - showcase -
« Reply #17 on: December 07, 2023, 06:33:16 pm »
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

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #18 on: December 08, 2023, 12:09:06 am »
Thanks @dseligo. I've added to the uses clause accordingly.
Conscience is the debugger of the mind

#### Mongkey

• Sr. Member
• Posts: 430
##### Re: BGRABitmap - showcase -
« Reply #19 on: December 08, 2023, 03:07:14 pm »
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

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #20 on: December 08, 2023, 05:47:43 pm »
Yes, @Mongkey, whatever you can do with JS canvas2d, you can do with BGRABitmap Canvas2D.
Conscience is the debugger of the mind

#### Mongkey

• Sr. Member
• Posts: 430
##### Re: BGRABitmap - showcase -
« Reply #21 on: December 09, 2023, 01:48:13 am »
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.
« Last Edit: December 09, 2023, 03:12:55 am by Mongkey »

#### circular

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #22 on: December 09, 2023, 02:27:53 pm »
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

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.
« Last Edit: December 09, 2023, 02:49:06 pm by circular »
Conscience is the debugger of the mind

#### Mongkey

• Sr. Member
• Posts: 430
##### Re: BGRABitmap - showcase -
« Reply #23 on: December 10, 2023, 03:04:18 am »

#### circular

• Hero Member
• Posts: 4122
##### Re: BGRABitmap - showcase -
« Reply #24 on: December 10, 2023, 11:09:24 am »
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
« Last Edit: December 10, 2023, 11:12:32 am by circular »
Conscience is the debugger of the mind