B4A Library CanvasView

It is a very partly wrap for this Github project and this pull request. Purely done to see if it will solve this issue (https://www.b4x.com/android/forum/t...ing-with-your-finger.66661/page-2#post-484453) for @ykucuk. Will add the additional functionality if it is what @ykucuk is after.

1.png



Sample Code:
Code: 
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CanvasView
    Dim b As Bitmap
    Private Button1 As Button
    Private Button2 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
   
    b.Initialize(File.DirAssets,"horse.png")
    cv1.drawBitmap(b)
   

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   
    cv1.Mode = cv1.MODE_ERASER
    cv1.PaintStrokeWidth = 10
   
End Sub

Sub Button2_Click
   
    cv1.Mode = cv1.MODE_DRAW
    cv1.PaintStrokeColor = Colors.Red
    cv1.PaintStrokeWidth = 1
   
End Sub
 

Attachments

Click to expand...
Updated as requested by @ykucuk. Have not positioned any of the views in Designer properly. Leaving it up to you. You can:
1. Choose DRAW or ERASE
2. Select the pen thickness
3. Select to draw with the pen, lines, circles, etc
4. REDO
5. UNDO
6. CLEAR


The Horse - Picasso...
1.png


2.png


Sample Code

Code: 
#Region  Project Attributes
    #ApplicationLabel: b4aCanvasView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CanvasView
    Dim b As Bitmap

    Private Spinner1 As Spinner
    Private Spinner2 As Spinner
    Private Spinner3 As Spinner
    Private Spinner4 As Spinner
    Private Button1 As Button
    Private Button2 As Button
    Private Button3 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    b.Initialize(File.DirAssets,"horse.png")
    cv1.drawBitmap(b)
    Spinner1.AddAll(Array As String("Draw","Eraser"))
    Spinner2.AddAll(Array As String("PEN", "LINE", "RECTANGLE", "CIRCLE", "ELLIPSE", "QUADRATIC_BEZIER", "QUBIC_BEZIER"))
    Spinner3.AddAll(Array As String("Red", "Yellow", "Green", "Blue", "Magenta", "Cyan", "Black"))
    Spinner4.AddAll(Array As Int(1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35))
    cv1.PaintStrokeColor = Colors.Red

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub



Sub Spinner1_ItemClick (Position As Int, Value As Object)
  
    If Position = 0 Then cv1.Mode = cv1.MODE_DRAW
    If Position = 1 Then cv1.Mode = cv1.MODE_ERASER
End Sub

Sub Spinner2_ItemClick (Position As Int, Value As Object)
  
    If Position = 0 Then cv1.Drawer = cv1.DRAWER_PEN
    If Position = 1 Then cv1.Drawer = cv1.DRAWER_LINE
    If Position = 2 Then cv1.Drawer = cv1.DRAWER_RECTANGLE
    If Position = 3 Then cv1.Drawer = cv1.DRAWER_CIRCLE
    If Position = 4 Then cv1.Drawer = cv1.DRAWER_ELLIPSE
    If Position = 5 Then cv1.Drawer = cv1.DRAWER_QUADRATIC_BEZIER
    If Position = 6 Then cv1.Drawer = cv1.DRAWER_QUBIC_BEZIER
End Sub

Sub Spinner3_ItemClick (Position As Int, Value As Object)
  
    If Position = 0 Then cv1.PaintStrokeColor = Colors.Red
    If Position = 1 Then cv1.PaintStrokeColor = Colors.Yellow
    If Position = 2 Then cv1.PaintStrokeColor = Colors.Green
    If Position = 3 Then cv1.PaintStrokeColor = Colors.Blue
    If Position = 4 Then cv1.PaintStrokeColor = Colors.Magenta
    If Position = 5 Then cv1.PaintStrokeColor = Colors.Cyan
    If Position = 6 Then cv1.PaintStrokeColor = Colors.Black
  
End Sub

Sub Spinner4_ItemClick (Position As Int, Value As Object)
  
    Dim pensize As Int = Value
    cv1.PaintStrokeWidth = pensize
  
End Sub

Sub Button1_Click
  
    cv1.undo
  
End Sub

Sub Button2_Click
  
    cv1.redo
  
End Sub

Sub Button3_Click
  
    cv1.clear
  
End Sub
 

Attachments

Last edited:
its great. I know i asked to much but Is it possible change draw type like (line, spray, etc) ?
 
ykucuk said:
its great. I know i asked to much but Is it possible change draw type like (line, spray, etc) ?
Click to expand...
The project that I wrapped does not allow for it at present. I have posted the Java code - change it to accommodate the additional features that you might require.
 
Hello, Great work!!!!
is possible terminate drawing ???? finish CanvasView drawing ???

The idea is a pause drawing and later continue drawing. Or end drawing.

Thanks
 
Last edited:
scsjc said:
Hello, Great work!!!!
is possible terminate drawing ???? finish CanvasView drawing ???

The idea is a pause drawing and later continue drawing. Or end drawing.

Thanks
Click to expand...
I will add a getter to bring the Bitmap back to B4A (it might be there already - can't remember). After that it will be up to you to save it and reload it (in your B4A code) if you want to continue on the same drawing.
 
scsjc said:
Hello, Great work!!!!
is possible terminate drawing ???? finish CanvasView drawing ???

The idea is a pause drawing and later continue drawing. Or end drawing.

Thanks
Click to expand...
Change your B4A code to the following (no changes required to the library):
Code: 
#Region  Project Attributes
    #ApplicationLabel: b4aCanvasView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CanvasView
    Dim b As Bitmap

    Private Spinner1 As Spinner
    Private Spinner2 As Spinner
    Private Spinner3 As Spinner
    Private Spinner4 As Spinner
    Private Button1 As Button
    Private Button2 As Button
    Private Button3 As Button
    Dim b2 As Bitmap
    Private iv1 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
 
    b.Initialize(File.DirAssets,"horse.png")
    cv1.drawBitmap(b)
    Spinner1.AddAll(Array As String("Draw","Eraser"))
    Spinner2.AddAll(Array As String("PEN", "LINE", "RECTANGLE", "CIRCLE", "ELLIPSE", "QUADRATIC_BEZIER", "QUBIC_BEZIER"))
    Spinner3.AddAll(Array As String("Red", "Yellow", "Green", "Blue", "Magenta", "Cyan", "Black"))
    Spinner4.AddAll(Array As Int(1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35))
    cv1.PaintStrokeColor = Colors.Red

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub



Sub Spinner1_ItemClick (Position As Int, Value As Object)
 
    If Position = 0 Then cv1.Mode = cv1.MODE_DRAW
    If Position = 1 Then cv1.Mode = cv1.MODE_ERASER
End Sub

Sub Spinner2_ItemClick (Position As Int, Value As Object)
 
    If Position = 0 Then cv1.Drawer = cv1.DRAWER_PEN
    If Position = 1 Then cv1.Drawer = cv1.DRAWER_LINE
    If Position = 2 Then cv1.Drawer = cv1.DRAWER_RECTANGLE
    If Position = 3 Then cv1.Drawer = cv1.DRAWER_CIRCLE
    If Position = 4 Then cv1.Drawer = cv1.DRAWER_ELLIPSE
    If Position = 5 Then cv1.Drawer = cv1.DRAWER_QUADRATIC_BEZIER
    If Position = 6 Then cv1.Drawer = cv1.DRAWER_QUBIC_BEZIER
End Sub

Sub Spinner3_ItemClick (Position As Int, Value As Object)
 
    If Position = 0 Then cv1.PaintStrokeColor = Colors.Red
    If Position = 1 Then cv1.PaintStrokeColor = Colors.Yellow
    If Position = 2 Then cv1.PaintStrokeColor = Colors.Green
    If Position = 3 Then cv1.PaintStrokeColor = Colors.Blue
    If Position = 4 Then cv1.PaintStrokeColor = Colors.Magenta
    If Position = 5 Then cv1.PaintStrokeColor = Colors.Cyan
    If Position = 6 Then cv1.PaintStrokeColor = Colors.Black
 
End Sub

Sub Spinner4_ItemClick (Position As Int, Value As Object)
 
    Dim pensize As Int = Value
    cv1.PaintStrokeWidth = pensize
 
End Sub

Sub Button1_Click
 
    cv1.undo
 
End Sub

Sub Button2_Click
 
    cv1.redo
 
End Sub

Sub Button3_Click
 
    b2 = cv1.Bitmap
    cv1.clear
    cv1.Visible = False
    iv1.Visible = True                   'iv1 is a B4A ImageView added via designer and visibility set to invisible. Only becomes visible once the Clear button is clicked
    iv1.Bitmap = b2
 
End Sub

The above code will bring back the Bipmap when you press the Clear button, then hide the Customview, and display the returned Bitmap in iv1 (imageview added in designer but with visibility set to invisible). See Sub Button3_Click...

Once you have the bitmap you can save it via B4A code and then later reload it to continue drawing....I guess....
 

Attachments

Hello Johan,
is possible do the lines with a grid (draw lines fixing on points every xxx dips)

Thanks !!!
 
Hello, I do not handle much in image editing, as I can save the changes made in the image.
 
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
 
Last edited:
scsjc said:
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
Click to expand...
Not with the library as it is at present. Will have to add some code to the original Github project. Will see if I can get it added.
 
scsjc said:
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
Click to expand...
I have investigated and tried. It will take some extensive surgery to the original Github code and not something that I have time for at present. If you want to I will post the original Java code and you can then try and change it. Not going to be as simple as what I thought it would be because of the "redraw" and "paint" being used in the original code.

Do you want me to post the Java code and have a go at it?
 
Johan Schoeman said:
I have investigated and tried. It will take some extensive surgery to the original Github code and not something that I have time for at present. If you want to I will post the original Java code and you can then try and change it. Not going to be as simple as what I thought it would be because of the "redraw" and "paint" being used in the original code.

Do you want me to post the Java code and have a go at it?
Click to expand...

Thanks for your time,
the truth is that my level of java is very low, and you do not need to post it.

Thank you !!!
 
Ramon Bustamante said:
Hello, great job. Is it posible to save the background image with the draw made with the finger?
Click to expand...
See post #7. It will bring the Bitmap back to B4A. You need to handle the bitmap from there onwards for eg save it. There are samples on the forum that demonstrates how to save a Bitmap.
 
Johan Schoeman said:
See post #7. It will bring the Bitmap back to B4A. You need to handle the bitmap from there onwards for eg save it. There are samples on the forum that demonstrates how to save a Bitmap.
Click to expand...
Thanks for your answer.
Solved, I left sample code to do it:
Dim Data() As Byte
'DirFingerPrint: directory where you want to save the image
'FileFingerPrint: destination file
Dim out As OutputStream = File.OpenOutput(DirFingerPrint, FileFingerPrint, False)

Dim b2 As Bitmap
b2 = cv1.Bitmap '** cv1 is the variable used in example of post #7
b2.WriteToStream(out, 100, "PNG")

out.WriteBytes(Data, 0, Data.Length)
out.Close
 
There is a bug with CanvasView.clear. The CanvasView does not erase completely.
 
polo said:
There is a bug with CanvasView.clear. The CanvasView does not erase completely.
Click to expand...
Yes, there is a bug in the CanvasViewClass. The Clear function of the Class does not clear the whole memory but just one part of it:

...
public void clear() {
Path path = new Path();
path.moveTo(0F, 0F);
path.addRect(0F, 0F, 1000F, 1000F, Path.Direction.CCW);
path.close();
....

I have added all the code of the class between:

#if JAVA
<all the code of the class>
#end java

And also Y removed the library of the class, expecting that it takes the inline code, but the B4A does not seem to recognize the added code...

Am I missing something?

Thanks for your help!
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS Draw (FabricView and CanvasView)
2
Replies
37
Views
26K
Alexander Stolte
Alexander Stolte
Lucas Eduardo
  • Question Question
Android Question fill with color - CanvasView
Replies
0
Views
2K
Lucas Eduardo
Lucas Eduardo
Erel
  • Locked
  • Article Article
B4A Library [B4X] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View
7 8 9
Replies
166
Views
159K
Erel
Erel
MrKim
  • Question Question
Android Question CanvasView vs Fabric View
Replies
0
Views
2K
MrKim
MrKim
rscheel
  • Question Question
Android Question CanvasView, Save changes
Replies
1
Views
3K
rscheel
rscheel
Back
Top