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:

    [​IMG]

    Code:
    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)
       
    Activity.LoadLayout("1")
       Create
    End Sub

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

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

    Sub Timer1_Tick
       cvs.ClearRect(cvs.TargetRect)
       
    If SmileyRect.Right > cvs.TargetRect.Width Then
         vx = -
    Abs(vx)
       
    Else If SmileyRect.Left < 0 Then
         vx = 
    Abs(vx)
       
    End If
       
    If SmileyRect.Bottom > cvs.TargetRect.Height Then
         vy = -
    Abs(vy)
       
    Else If SmileyRect.Top < 0 Then
         vy = 
    Abs(vy)
       
    End If
       SmileyRect.Left = SmileyRect.Left + vx
       SmileyRect.Top = SmileyRect.Top + vy
       SmileyRect.Width = size
       SmileyRect.Height = size
       deg = deg + 
    1
       cvs.DrawBitmapRotated(smiley, SmileyRect, deg)
       cvs.Invalidate
    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!
     
Loading...
  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