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:
B4X:
#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

  • CanvasViewLibFiles.zip
    11.5 KB · Views: 626
  • b4aCanvasView.zip
    105.7 KB · Views: 582

Johan Schoeman

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

B4X:
#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

  • CanvasViewLibFiles.zip
    12.1 KB · Views: 572
  • b4aCanvasView.zip
    106.4 KB · Views: 507
  • TheJavaCode.zip
    8.7 KB · Views: 468
Last edited:

ykucuk

Well-Known Member
Licensed User
Longtime User
its great. I know i asked to much but Is it possible change draw type like (line, spray, etc) ?
 

Johan Schoeman

Expert
Licensed User
Longtime User
its great. I know i asked to much but Is it possible change draw type like (line, spray, etc) ?
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.
 

scsjc

Well-Known Member
Licensed User
Longtime User
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:

Johan Schoeman

Expert
Licensed User
Longtime User
Hello, Great work!!!!
is possible terminate drawing ???? finish CanvasView drawing ???

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

Thanks
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.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hello, Great work!!!!
is possible terminate drawing ???? finish CanvasView drawing ???

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

Thanks
Change your B4A code to the following (no changes required to the library):
B4X:
#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

  • b4aCanvasView.zip
    106.6 KB · Views: 503

scsjc

Well-Known Member
Licensed User
Longtime User
Hello Johan,
is possible do the lines with a grid (draw lines fixing on points every xxx dips)

Thanks !!!
 

rscheel

Well-Known Member
Licensed User
Longtime User
Hello, I do not handle much in image editing, as I can save the changes made in the image.
 

scsjc

Well-Known Member
Licensed User
Longtime User
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
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.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hello,
is possible draw a dotted lines " . . . . . . . " or " - - - - - - "

thanks
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?
 

scsjc

Well-Known Member
Licensed User
Longtime User
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?

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 !!!
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hello, great job. Is it posible to save the background image with the draw made with the finger?
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.
 

Ramon Bustamante

Member
Licensed User
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.
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
 

hibrid0

Active Member
Licensed User
Longtime User
Hi I like to know if is possible to add text on this canvasview?
 

polo

Member
Licensed User
Longtime User
There is a bug with CanvasView.clear. The CanvasView does not erase completely.
 

Cesaral

Member
There is a bug with CanvasView.clear. The CanvasView does not erase completely.
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!
 
Top