Wish [B4X][XUI]B4XCanvas.DrawPath behave differently in B4A and B4J

klaus

Expert
Licensed User
Hi Erel.

B4XCanvas.DrawPath behave differently in B4A and B4J with Filled = False.
I haven't tested it ib B4i.

In B4A the Stroke is drawn on the path.
upload_2019-4-2_16-42-41.png


In B4J the Stroke is drawn insides the path.
upload_2019-4-2_16-46-42.png


Wish: same behaviour in all three products.

An image developped with B4J.
upload_2019-4-2_16-49-11.png


Looks quite different in B4A, with the same code!
upload_2019-4-2_16-49-52.png


Very annoying.

The code for the rounded rectangle example (cvsAct is a B4XCanvas):
B4X:
Private pthTest As B4XPath
Private rctTest As B4XRect
rctTest.Initialize(10dip, 450dip, 310dip, 500dip)
pthTest.InitializeRoundedRect(rctTest, 20dip)
cvsAct.Initialize(MainForm.RootPane)
cvsAct.DrawPath(pthTest, xui.Color_Blue, False, 9dip)
cvsAct.DrawPath(pthTest, xui.Color_Red, False, 2dip)
 

Erel

Administrator
Staff member
Licensed User
B4XCanvas.DrawPath behave differently in B4A and B4J with Filled = False.
I haven't tested it ib B4i.
This is a known technical limitation: https://www.b4x.com/android/help/xui.html#b4xcanvas_drawpath

A possible solution is to use BitmapCreator instead of Canvas.
It will look exactly the same on the three platforms:


Class code to create a progress bar with gradient fill:
B4X:
Sub Class_Globals
   Private xui As XUI
   Private mImageView As B4XView
   Private InteriorBrush As BCBrush
   Private bc As BitmapCreator
   Private CornerRadius As Int = 19
   Private TransparentBrush As BCBrush
   Private BorderBrush As BCBrush
End Sub

Public Sub Initialize (ImageView1 As B4XView)
   bc.Initialize(ImageView1.Width / xui.Scale, ImageView1.Height / xui.Scale)
   bc.FillGradient(Array As Int(0xFF98FF74, 0xFF2FB800), bc.TargetRect, "LEFT_RIGHT")
   Dim g As BitmapCreator
   g.Initialize(bc.mWidth, bc.mHeight)
   g.DrawRectRounded2(g.TargetRect, bc.CreateBrushFromBitmapCreator(bc), True, 0, CornerRadius)
   InteriorBrush = g.CreateBrushFromBitmapCreator(g)
   mImageView = ImageView1
   TransparentBrush = g.CreateBrushFromColor(xui.Color_Transparent)
   BorderBrush = g.CreateBrushFromColor(0xFF036A00)
End Sub

Public Sub Draw (Progress As Int)
   bc.DrawRect2(bc.TargetRect, TransparentBrush, True, 0)
   Dim r As B4XRect
   r.Initialize(0, 0, bc.mWidth * Progress / 100, bc.mHeight)
   bc.DrawRect2(r, InteriorBrush, True, 0)
   bc.DrawRectRounded2(bc.TargetRect,BorderBrush , False, 5, CornerRadius)
   bc.SetBitmapToImageView(bc.Bitmap, mImageView)
End Sub
Note that you might see a small issue with the bottom border where it is one pixel thinner than it should be. This is fixed in BitmapCreator v4.70 that will be released later today.
 
Top