Wish XUI Library Drawing methods

klaus

Expert
Licensed User
Longtime User
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:

upload_2019-3-30_19-40-35.png


Attached my B4J test program.
 

Attachments

  • TestXUIPathDrawing.zip
    2.5 KB · Views: 490

Erel

B4X founder
Staff member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

B4X founder
Staff member
Licensed User
Longtime User
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.
 

klaus

Expert
Licensed User
Longtime User
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:
upload_2019-4-14_11-34-38.png

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

Erel

B4X founder
Staff member
Licensed User
Longtime User
You are correct. I meant to show that it doesn't add the two extra lines.
The implementation is consistent with DrawCircle behavior:

B4X:
bc.DrawCircle(50, 50, 50, xui.Color_Blue, False, 10)
bc.DrawArc(50, 50, 50, xui.Color_Red, False, 10, -30, 60)
SS-2019-04-14_12.51.19.png

DrawArc must be consistent with DrawCircle.

The non-filled arc is also consistent with the filled arc:
B4X:
bc.DrawArc(50, 50, 50 , xui.Color_Yellow, True, 0, -30, 80)
bc.DrawArc(50, 50, 50 , xui.Color_Red, False, 10, -30, 40)
SS-2019-04-14_12.59.19.png



It is simple to get the result you want. You just need to add StrokeWidth / 2 to the radius:
B4X:
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)

SS-2019-04-14_12.53.11.png


You can add your own DrawArc method:
B4X:
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

Expert
Licensed User
Longtime User
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.
 
Top