Android Tutorial [B4X] [XUI] Drawing with B4XCanvas

Discussion in 'Tutorials & Examples' started by Erel, Oct 17, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

    B4XCanvas is the cross platform version of Canvas.

    Steps to using B4XCanvas:

    1. Initialize and pass the target view. In most cases it will be a Panel (or Pane). It must be a Pane in B4J.
    2. Make the drawings.
    3. Call Invalidate to commit the drawings.
    4. If the target view is resized then you should call B4XCanvas.Resize. This is more relevant in B4J and B4i as the activity is recreated in B4A when the screen size changes.
    5. B4XCanvas.CreateBitmap returns the drawings bitmap.
    6. Call B4XCanvas.Release if the canvas is no longer required.

    Example of a bouncing smiley:


    Sub Process_Globals
    Private Timer1 As Timer
    End Sub

    Sub Globals
    Private xui As XUI
    Private smiley As B4XBitmap
    Private deg, vx = 10dip, vy = 10dip As Double
    Private SmileyRect As B4XRect
    Private size As Double = 40dip
    Private Panel1 As B4XView
    Private cvs As B4XCanvas

    End Sub

    Sub Activity_Create(FirstTime As Boolean)
    End Sub

    '*** code is identical from here ***
    Sub Resize 'ignore
       cvs.Resize(Panel1.Width, Panel1.Height)
    End Sub

    Sub Create
       smiley = xui.LoadBitmapResize(
    File.DirAssets, "smiley.png", size, size, False)
    If xui.IsB4J Then
         vx = 
         vy = 
         vx = 
         vy = 
    End If
       Timer1.Enabled = 
    10dip10dip10dip + size, 10dip + size)
    End Sub

    Sub Timer1_Tick
    If SmileyRect.Right > cvs.TargetRect.Width Then
         vx = -
    Else If SmileyRect.Left < 0 Then
         vx = 
    End If
    If SmileyRect.Bottom > cvs.TargetRect.Height Then
         vy = -
    Else If SmileyRect.Top < 0 Then
         vy = 
    End If
       SmileyRect.Left = SmileyRect.Left + vx
       SmileyRect.Top = SmileyRect.Top + vy
       SmileyRect.Width = size
       SmileyRect.Height = size
       deg = deg + 
       cvs.DrawBitmapRotated(smiley, SmileyRect, deg)
    End Sub
    Another example: [B4X] [XUI] Create a round image

    Attached Files:

    Last edited: Oct 24, 2017
    luke2012, koaunglay, Levit and 12 others like this.
  2. trisium

    trisium Member Licensed User

    At the moment I am still trying to understand the differences between pane, panel, canvas etc.
    One question would be: B4XCanvas has no Visible property - why? And what could a workaround look like?
    Thanks for any help!!
  3. DonManfred

    DonManfred Expert Licensed User

    A canvas is not a view. To initialize the canvas you use a Panel.
    You can set the panels visible flag to change visibility.
  4. klaus

    klaus Expert Licensed User

    In B4X XUI, a Canvas must be linked to a Panel (B4A, B4i) or a Pane (B4J) with the B4XCanvas1.Initialize method.
    You may need to call B4XCanvas1.Invalidate to make the drawing active.
    This is different from B4A and B4i where you need to Invalidate the Panel.
    You may have a look at the B4X Graphics and B4X XUI booklets.
  5. Erel

    Erel Administrator Staff Member Licensed User

    Note that these differences can be ignored.
    1. You should use B4XView with XUI.CreatePanel or a Pane(l) created with the designer.
    2. You should call B4XCanvas.Invalidate when you are done drawing.
    Last edited: Nov 12, 2019
  6. trisium

    trisium Member Licensed User

    Many thanks for the quick answers!!!
    That helped a lot - now things are getting clearer!
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice