Recent

Author Topic: [SOLVED] [LAMW] jCanvas and text measurement  (Read 12033 times)

r.lukasiak

  • New Member
  • *
  • Posts: 47
[SOLVED] [LAMW] jCanvas and text measurement
« on: December 03, 2021, 06:12:05 am »
Hi everyone!

I'm trying to figure out how to use jCanvas, from demos I found out how to draw simple figures but I can't figure out how to work with text. There is DrawText but...
1. how to set font size (+style etc)?
2. how to measure width and height of given string? Something like Canvas.TextWidth():integer for Linux/Windows.

I need a custom drawn jBitmap for jScrollView.AddImage. I've tried jDrawingView, it has all the functions I need but jScrollView doesn't seem to accept jDrawingView.GetImage().

has anyone played with this?
« Last Edit: December 09, 2021, 03:03:58 am by r.lukasiak »

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #1 on: December 03, 2021, 07:08:04 pm »
Quote
I've tried jDrawingView, it has all the functions I need

Good!

Quote
but jScrollView doesn't seem to accept jDrawingView.GetImage().

I will try some solution!

Thank you!
« Last Edit: December 03, 2021, 07:56:25 pm by jmpessoa »
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #2 on: December 03, 2021, 08:50:16 pm »
well, in my test

after set jScrollView property "InnerLayout = ilLinear"

this code lines works perfectly!

Code: Pascal  [Select][+][-]
  1.  jScrollView1.AddImage(jDrawingView1.GetImage());
  2.  jScrollView1.AddImage(jDrawingView1.GetImage());
  3.  jScrollView1.AddImage(jDrawingView1.GetImage());
  4.  
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #3 on: December 04, 2021, 12:03:00 am »
I set the InnerLayout and it worked, it added the object. However the size and position is out of control and it displayed just white block, not what I tried to draw. How can I set the exact dimmensions?

what I did:
Code: Pascal  [Select][+][-]
  1. procedure MyApp.BtnClick(Sender: TObject);
  2. var txt: string;
  3.   tw,th: single;
  4. begin
  5.   txt:="My example text"
  6.   tw:=jDrawingView1.GetTextWidth(Txt);
  7.   th:=jDrawingView1.GetTextHeight(Txt);
  8.   jDrawingView1.Width :=Round(tw)+10;
  9.   jDrawingView1.Height:=Round(th)+10;
  10.   jDrawingView1.PaintColor:=colbrDimGray;
  11.   jDrawingView1.DrawRoundRect(0,0,Round(tw)+10,Round(th)+10,15,15);
  12.   jDrawingView1.PaintColor:=colbrBlack;
  13.   jDrawingView1.DrawText(Txt,5,5);
  14.   jScrollView1.AddImage(jDrawingView1.GetImage());  
  15. end.
  16.  

I was also improvising and tried:
Code: Pascal  [Select][+][-]
  1.   Jdrawingview1.PosRelativeToParent:=[rpRight];
  2.   jdrawingview1.LayoutParamHeight:=lpExact;
  3.   jdrawingview1.LayoutParamWidth:=lpExact;
  4.  
but with no effect.

What I need is to create something like a chat with "message bubbles" aligned to the left or right and each another one appearing below the others. Is that possible to achieve using jScrollBox?

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #4 on: December 04, 2021, 02:19:53 am »

Quote
Is that possible to achieve using jScrollBox?

No.  you need draw you "perfect" image "like a chat" in jDrawingView  before add it to jScrollView.


Quote
I was also improvising and tried:
  Jdrawingview1.PosRelativeToParent:=[rpRight];
  jdrawingview1.LayoutParamHeight:=lpExact;
  jdrawingview1.LayoutParamWidth:=lpExact;

No. Setting jScrollView property "InnerLayout = ilLinear"  these parameters will not works....



Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #5 on: December 05, 2021, 04:58:41 am »
Quote
No.  you need draw you "perfect" image "like a chat" in jDrawingView  before add it to jScrollView.
So I can draw an image, setting its width according to ScollView.Width with a transparent background and just draw the part I need, either on the left or right side? It makes sense but I can't actually draw anything. Whatever I do, it always adds white rectangle, around 1/3 the screen width and more than 100% height.
1. How can I set the size of the image?
2. How can I actually apply my drawing to the image? I've tried many things, one of them:
Code: Pascal  [Select][+][-]
  1. procedure TKapp.BtnClick(Sender: TObject);
  2. var msg: string;
  3.   tw,th: single;
  4. begin
  5.   tw:=jDrawingView1.GetTextWidth(MsgEdit.Text);
  6.   th:=jDrawingView1.GetTextHeight(MsgEdit.Text);
  7.   jDrawingView1.Width :=ScrollView.Width;
  8.   jDrawingView1.Height:=Round(th)+10;          
  9.   jDrawingView1.DrawBackground($00FF00);
  10.   //jDrawingView1.Clear(colbrRed); <-I also tried this, I assume it cleans the bitmap and sets the background color??
  11.   jDrawingView1.PaintColor:=colbrDimGray;
  12.   jDrawingView1.DrawRoundRect(0,0,Round(tw)+10,Round(th)+10,15,15);
  13.   jDrawingView1.PaintColor:=colbrBlack;
  14.   jDrawingView1.DrawText(MsgEdit.Text,5,5);  
  15.   ChatScrollView.AddImage(jDrawingView1.GetImage();
  16.   //ChatScrollView.AddImage(jDrawingView1.GetImage(),0,scaleFitXY);  <-I also tried this. I assumed that scaleFitXY makes it follow image's original dimensions?
  17. end.
  18.  

what am I doing wrong? DrawView doesn't have anything like CreateBitmap(x,y,color) as jCanvas does so I assume that I should use DrawView.width and height to set the size or I'm completely mistaken?

Thanks in advance!


jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #6 on: December 05, 2021, 06:56:02 am »

Ok. I will do a simple demo for you....

(but, now I need a few hours of sleep) O:-)
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #7 on: December 05, 2021, 08:16:47 am »
I really appreciate it, thank you very much!

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #8 on: December 05, 2021, 09:55:34 pm »

Done!

Now you can start from the [updated] demo "AppDrawingInBitmap"
and as soon as necessary I will be improving the components jCanvas e jBitmap

Have fun!
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #9 on: December 06, 2021, 01:19:15 am »
Thank you very much!
I see we are back to jCanvas. I was able to recreate you demo on my app. Actually Canvas worked well from the beginning but the main issue for me was lack of txt measurement. Is there any way to implement it on jCanvas?
Meanwhile I discovered something really weird. The same like with jDrawingView only part of jCanvas is visible, more or less 2/5 of the area. Turning the phone horizontally does the same, I can see more than vertically but it's still ~2/5 of the area.
Check the screenshot. What you see here is jCanvas 500x200 with text "hello" at 10,10. It looks like jScrollView area starts beyond the screen, but the scrollbar is where it's supposed to be. Is that some bug or I messed up with some settings?
Sorry for being a pain in the...neck :D

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #10 on: December 06, 2021, 03:09:08 am »
Quote
I was able to recreate you demo on my app

No. My demo don't have visibility issue....

Quote
I messed up with some settings?

Yes. You need set property:
    "jScrollView1.LayoutParamWidth = lpMatchParent"

and then:

   w:= jScrollView1.Width;  // <<--------------------------
   h:= 300; //variable
   jCanvas1.CreateBitmap(w , h, colbrLinen); //

Take a good look at all the properties configurations of the demo!

Quote
[txt measurement] Is there any way to implement it on jCanvas?

Yes!

Quote
Turning the phone horizontally....

we'll take care of that later...
« Last Edit: December 06, 2021, 03:10:46 am by jmpessoa »
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #11 on: December 06, 2021, 04:42:45 am »
Quote
Yes. You need set property:
    "jScrollView1.LayoutParamWidth = lpMatchParent"

and then:

   w:= jScrollView1.Width;  // <<--------------------------
   h:= 300; //variable
   jCanvas1.CreateBitmap(w , h, colbrLinen); //

Take a good look at all the properties configurations of the demo!

That's what I did.  jScrollView1.LayoutParamWidth is set lpMatchParent through Object Inspector but I will also add it runtime, just to make sure but I think if it weren't set, the scrollbar wouldn't appear on the right side where it's expected but I may be wrong :D

Quote
Yes!
it'd be wonderful!

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #12 on: December 06, 2021, 06:01:59 am »
And then:

   w:= jScrollView1.Width;  // <<--------------------------
   h:= 300; //variable
   jCanvas1.CreateBitmap(w , h, colbrLinen);
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

r.lukasiak

  • New Member
  • *
  • Posts: 47
Re: [LAMW] jCanvas and text measurement
« Reply #13 on: December 06, 2021, 06:31:21 am »
yes, I did this.
I'm trying to test something but now I got some problems with Gradle, it fails on compiling  %) I hope to solve it soon.

Thx

UPDATE:
fixed, tested and it's working perfectly!

would it be a big deal to implement TextWidth and TextHeight on jCanvas?
« Last Edit: December 06, 2021, 12:44:30 pm by r.lukasiak »

jmpessoa

  • Hero Member
  • *****
  • Posts: 2052
Re: [LAMW] jCanvas and text measurement
« Reply #14 on: December 07, 2021, 05:54:07 am »
Quote
would it be a big deal to implement TextWidth and TextHeight on jCanvas?

Maybe, no. I will try!
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

 

TinyPortal © 2005-2018