Recent

Author Topic: BGRABitmap - showcase -  (Read 4923 times)

circular

  • Hero Member
  • *****
  • Posts: 4356
    • Personal webpage
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: 4356
    • Personal webpage
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;
  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;
« Last Edit: December 08, 2023, 12:08:41 am by circular »
Conscience is the debugger of the mind

dseligo

  • Hero Member
  • *****
  • Posts: 1422
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: 4356
    • Personal webpage
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: 433
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  :D

circular

  • Hero Member
  • *****
  • Posts: 4356
    • Personal webpage
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: 433
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: 4356
    • Personal webpage
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
  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.  :)
« Last Edit: December 09, 2023, 02:49:06 pm by circular »
Conscience is the debugger of the mind

Mongkey

  • Sr. Member
  • ****
  • Posts: 433
Re: BGRABitmap - showcase -
« Reply #23 on: December 10, 2023, 03:04:18 am »
 :) no success even i already add easylazfreetype

circular

  • Hero Member
  • *****
  • Posts: 4356
    • Personal webpage
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

 

TinyPortal © 2005-2018