Recent

Author Topic: Modern UI in Lazarus  (Read 108535 times)

ps

  • Full Member
  • ***
  • Posts: 128
    • CSS
Re: Modern UI in Lazarus
« Reply #240 on: May 24, 2020, 06:49:38 am »
I can look into int.

Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

lainz

  • Hero Member
  • *****
  • Posts: 3593
    • Lainz
Re: Modern UI in Lazarus
« Reply #241 on: May 24, 2020, 01:59:20 pm »
@ps really nice, I've created a bug report to see if you're interested on using BGRABitmap to draw, to add more things like gradients, antialiasing and transparency.

We're working on a set of controls for MSEide and LCL, but I think that we can speed up the development if we use your library. Is more easy to composite things with your CSS library.

I can look into int.

Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion

Hi, I asked @circular the author of BGRABitmap that he can give you a proper answer. Unfortunatelly I have no idea, I'm just a simple user of his library, and don't know the details.
https://lainz.github.io - My Website
https://lazpaint.github.io/ - LazPaint Downloads

winni

  • Hero Member
  • *****
  • Posts: 1459
Re: Modern UI in Lazarus
« Reply #242 on: May 24, 2020, 03:29:10 pm »
Hi!

Clip a Polygon - or whatever you need:

Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. var tmp : TBGRABitmap;
  3.     poly : ArrayOfTPointF;
  4. begin
  5. tmp := TBGRABitmap.create (width, height, cssWhite);
  6. setLength(Poly,3);
  7. poly[0] := PointF(10,10);
  8. Poly[1] := PointF (tmp.width -10,10);
  9. Poly[2] := PointF (10,Tmp.height - 10);
  10. tmp. ClipRect := Rect (0,0,tmp.width - 100, tmp.height);
  11. tmp.DrawPolygonAntialias(poly,cssBlack,3,cssRed);
  12. tmp.Draw (canvas,0,0);
  13. tmp.free;
  14. end;                      

Winni

ps

  • Full Member
  • ***
  • Posts: 128
    • CSS
Re: Modern UI in Lazarus
« Reply #243 on: May 24, 2020, 04:03:14 pm »
Clip a Polygon - or whatever you need:
Thank's but it's only rect, we need clip region (points of polygon). Tomorow I look into TBGRABitmap
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

circular

  • Hero Member
  • *****
  • Posts: 3333
    • Personal webpage
Re: Modern UI in Lazarus
« Reply #244 on: May 24, 2020, 05:07:03 pm »
BGRABitmap doesn't do polygonal clipping as such. Though you can achieve the same effect by using masks.

Code: Pascal  [Select][+][-]
  1. uses BGRABitmap, BGRABitmapTypes, BGRAGrayscaleMask;
  2.  
  3. { TForm1 }
  4.  
  5. procedure TForm1.FormPaint(Sender: TObject);
  6. var tmp, layer: TBGRABitmap;
  7.     mask: TGrayscaleMask;
  8.     poly : ArrayOfTPointF;
  9. begin
  10.   layer := TBGRABitmap.Create(clientwidth, clientheight, BGRAPixelTransparent);
  11.   setLength(Poly,3);
  12.   poly[0] := PointF(10, 10);
  13.   Poly[1] := PointF(layer.width-10, 10);
  14.   Poly[2] := PointF(10, layer.height-10);
  15.   layer.DrawPolygonAntialias(poly, cssBlack, 3, cssRed);
  16.  
  17.   mask := TGrayscaleMask.Create(clientwidth, clientheight, TByteMask.New(0));
  18.   mask.FillEllipseAntialias(mask.Width/2-0.5, mask.Height/2-0.5,
  19.                             mask.Width/2, mask.Height/2, TByteMask.New(255));
  20.   layer.ApplyMask(mask);
  21.   mask.Free;
  22.  
  23.   tmp := TBGRABitmap.create (clientwidth, clientheight, cssWhite);
  24.   tmp.PutImage(0,0, layer, dmDrawWithTransparency);
  25.   tmp.Draw (canvas,0,0);
  26.   tmp.free;
  27. end;  
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 3593
    • Lainz
Re: Modern UI in Lazarus
« Reply #245 on: May 24, 2020, 10:04:23 pm »
I tried to add BGRABitmap to CSS_package but I did it badly, at least to try.  :)

Things are drawn antialiased, but badly, seems that I did not setup the brush correctly... also it's slow because it creates and releases a bitmap each time, must be created and destroyed anywhere else only when neccessary.

Code: Pascal  [Select][+][-]
  1. bmp := TBGRABitmap.Create(TargetCanvas.Width, TargetCanvas.Height, BGRAPixelTransparent);
  2.     bmp.DrawPolygonAntialias(Ta, AColor);
  3.     bmp.Draw(ACanvas, 0, 0, False);
  4.     bmp.Free;
  5.     //TargetCanvas.Polygon(Ta);

Edit: oops, like a newby error, I created the bitmap with the size of the entire canvas each time it needs to draw  :-[

It should be replacing the ACanvas like ABGRABitmap, so instead of passing the canvas parameter in the drawing function, it must pass the BGRABitmap and draw into it, then when all the drawings are done in the TBGRABitmap, draw that to the final canvas.  :)

In other words: the bitmap must be created only once with the size of the target canvas, then draw in the BGRABitmap object, draw to final canvas and free it.
« Last Edit: May 24, 2020, 11:52:06 pm by lainz »
https://lainz.github.io - My Website
https://lazpaint.github.io/ - LazPaint Downloads

 

TinyPortal © 2005-2018