Wish XUI Library Drawing methods

[klaus]

Hi Erel.

A few wishes for the XUI library.

1. DrawPath.
Drawing a path with Filled = False draws the line insides the path and closes it automatically.
The path is calculated for Fill and ClipPath not for open.
Wish : leave the path open and draw the lines centered on the path, like BitmapCreator or PolyLine in JavaFX.

2. Path.InitializeArc and DrawPath and Fill = False.
With Filled = False, the arc is automatically closed with two radiuses to the center.
Wish1 : leave the path open and center the line on the path.
Wish2 : add an option with OPEN, ROUND, CHORD

3. DrawLine with big StrokeWidths
Add an option LineCap for the line ends : BUTT, ROUND, SQUARE
Like JavaFX.

4. DrawPath with Filled = False and big StrokeWidths
Add an option LineJoint : MITER, BEVER, ROUND
In BitmapCreator
The LineCap option should be applied at the begin and end point, like JavaFX.

The most important to me are wish 1 and 2, the two others are secondary wishes.
The image below shows what I mean:

Attached my B4J test program.

 

[Erel]

Note that your program will crash with Java 11 in release mode due to a bug in B4J, related to DrawPathRotated. It is fixed for the next update.

Wish : leave the path open and draw the lines centered on the path, like BitmapCreator or PolyLine in JavaFX.

DrawPath behavior cannot be changed like this (due to the way it is implemented).

DrawPolygon draws the line centered: https://www.b4x.com/android/forum/threads/b4x-xui-faster-drawpolygon-method.94430/
You can also keep the path open in B4J, if you change the method name from "strokePolygon" to "strokePolyline".

With Filled = False, the arc is automatically closed with two radiuses to the center.

This is again how DrawPath behaves in B4J. It clips the canvas based on the shape and either fills it or draws the boundaries.

 

[klaus]

Hi Erel,

1. DrawPath behaves differently with XUI and with BitmapCreator when Filled = False.
In BitmapCreator it works like the described wish, but in XUI it is not.
Unfortunately, the behaviour is not coherent between the two.

1. 2. That means that we cannot draw an open path with B4XCanvas !?
With BitmapCreator we can, but there it has no Arc method.
Therefore the only way is to write our own routines.

Sorry, but I am a bit estonished and even a bit frustrated.

 

[Erel]

Unfortunately, the behaviour is not coherent between the two.

They are based on completely different implementations.

That means that we cannot draw an open path with B4XCanvas !?

Not with DrawPath as it works by clipping the canvas to a shape (which is always closed).

I can add an arc drawing to BitmapCreator.

 

[Scantech]

I can add an arc drawing to BitmapCreator.

Will this draw an arc with an open path start and end boundaries? If yes, Please do so.

 

[Erel]

It should draw this for non-filled drawings:

Adding the other lines is simple.

 

[Erel]

DrawArc was added in BitmapCreator v4.70:
B4J: https://www.b4x.com/android/forum/threads/updates-to-internal-libaries.48274/#content
B4A: https://www.b4x.com/android/forum/threads/updates-to-internal-libraries.59340/#content
B4i: https://www.b4x.com/android/forum/threads/updates-to-internal-libraries.48179/

 

[klaus]

Thank you !

 

[klaus]

Hi Erel,
I have just used DrawArc with the updated BitmapCreator library and noticed that it doesn't draw like you said in post#6 but behaves like this with Filled = False:

The stroke width is not centered on the arc radius but insides the arc radius.
Could you please update this behaviour.

 

[Erel]

You are correct. I meant to show that it doesn't add the two extra lines.
The implementation is consistent with DrawCircle behavior:

bc.DrawCircle(50, 50, 50, xui.Color_Blue, False, 10)
bc.DrawArc(50, 50, 50, xui.Color_Red, False, 10, -30, 60)

DrawArc must be consistent with DrawCircle.

The non-filled arc is also consistent with the filled arc:

bc.DrawArc(50, 50, 50 , xui.Color_Yellow, True, 0, -30, 80)
bc.DrawArc(50, 50, 50 , xui.Color_Red, False, 10, -30, 40)

It is simple to get the result you want. You just need to add StrokeWidth / 2 to the radius:

bc.DrawArc(50, 50, 50 + 10/2, xui.Color_Red, False, 10, -30, 60)
bc.DrawArc(50, 50, 50 + 2/2, xui.Color_Yellow, False, 2, -30, 60)

You can add your own DrawArc method:

Sub DrawCenteredArc2(bc As BitmapCreator, X As Float, Y As Float, Radius As Float, brush As BCBrush, StrokeWidth As Int, StartAngle As Int, SweepAngle As Int)
   bc.DrawArc2(X, Y, Radius + StrokeWidth / 2, brush, False, StrokeWidth, StartAngle, SweepAngle)
End Sub

 

[klaus]

It is simple to get the result you want. You just need to add StrokeWidth / 2 to the radius:

This has already been done .

The only 'problem' is that the different graphic methods implementations don't behave the same.
We just need to remember it.