B4A Library [B4X] [XUI] AS Draw (FabricView and CanvasView)

Hello,
2 years ago i already had the idea of this view, but I failed in some places, but now I have taken up the challenge and the result is impressive.
Inspired by @Johan Schoeman FabricView and CanvasView.

B4J: jXUI, JavaObject
B4A: XUI
B4i: iXUI
Features
  • cross-platform compatible
  • set a background image
  • draw, erase or draw lines
  • undo and redo
  • clear all
  • set color, thickness and background color
  • enable or disable the drawing
  • import and export the drawing for later use
  • export the drawing as image or the complete view
Screenshot_20200330-134949.jpg

Draw what you want
20-03-30-16-48-56.gif

use a eraser
20-03-30-16-49-50.gif

set a background image
set background image.JPG

draw lines
AS Draw Line.gif

Examples
Save the drawing with background image:
    Dim Out As OutputStream
    Out = File.OpenOutput(File.DirApp, "Test.png", False)
    ASDraw1.ImageComplete.WriteToStream(Out, 100, "PNG")
    Out.Close
AS Draw
Author: Alexander Stolte
Version: 1.08

  • ASDraw
    • Events:
      • Touch (Action As Int, XY As Map)
    • Functions:
      • BackgroundImage_setImage (image As B4XBitmap, KeepAspectRatio As Boolean) As String
        sets a background image
      • Class_Globals As String
      • Clear As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • DrawMode_DRAW As String
      • DrawMode_ERASE As String
      • DrawMode_LINE As String
      • ExportDrawing As List
        export the drawing as list to import this later or to save it for later use, for example: the user make a break
      • getBackgroundColor As Int
        gets or sets the View Background Color
      • getBackgroundImage As B4XBitmap
        gets the background image
      • getDrawMode As String
      • getEnable As Boolean
        gets or sets the draw enable, if false then the touch event is ignored
      • getImage As B4XBitmap
        gets the drawing as image
      • getImageComplete As B4XBitmap
        gets the complete view as image
      • getStrokeColor As Int
        gets or sets the color of the draw line
      • getStrokeWidth As Float
        gets or sets the thickness of the draw line
      • ImportDrawing (drawings As List, new As Boolean) As String
        import a exported list of drawings
        new: if false then the items in the list are added to the existing ones
        new: if true then the intern list is reset
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Redo As String
      • setBackgroundColor (color As Int) As String
      • setDrawMode (mode As String) As String
      • setEnable (enable As Boolean) As String
      • setStrokeColor (color As Int) As String
      • setStrokeWidth (width As Float) As String
      • Undo As String
    • Properties:
      • BackgroundColor As Int
        gets or sets the View Background Color
      • BackgroundImage As B4XBitmap [read only]
        gets the background image
      • DrawMode As String
      • Enable As Boolean
        gets or sets the draw enable, if false then the touch event is ignored
      • Image As B4XBitmap [read only]
        gets the drawing as image
      • ImageComplete As B4XBitmap [read only]
        gets the complete view as image
      • StrokeColor As Int
        gets or sets the color of the draw line
      • StrokeWidth As Float
        gets or sets the thickness of the draw line
ToDo's

Changelog

  • 1.0
    • Release
  • 1.01
    • Fix B4J Draw Bug
    • Fix Import
    • Fix Resize
  • 1.02
    • Add Property BackgroundImage_setImage - sets a background image behind the drawing
    • Add Property BackgroundImage - gets the background image
    • Add Event Touch
  • 1.03
    • Add new mode to DrawMode: Line
    • AS Draw Line.gif
  • 1.04
    • Bug Fixes
  • 1.05
    • Add CropImageOnExport - exports the image with its dimensions and from the painted
  • 1.06
    • Add RotateImage - rotate the background image to the degree you want
  • 1.08
    • BugFix better resize handling with background images
    • Intern Function IIF renamed to iif2
  • 1.09
    • BugFix - ExportDrawing
    • Intern Function iif2 replaced with the core iif function
  • 1.10
    • BugFixes
Have Fun :)
 

Attachments

  • B4X Example.zip
    230.5 KB · Views: 376
  • ASDraw.b4xlib
    3.6 KB · Views: 310
Last edited:

Phayao

Active Member
Licensed User
Longtime User
This is great indeed !
Just not clear to me is: should I use the lib or the class - or both ?
And how can I import a bitmap ?

Thanks very much !
Chris
 

Alexander Stolte

Expert
Licensed User
Longtime User
Just not clear to me is: should I use the lib or the class - or both ?
If you need the source code of this view, use the class, if not then use the lib.

And how can I import a bitmap ?
take a panel, add a image view and this view to it and make a snapshot of this panel, then you have the whole image if you want to export it.
The view is transparent if you make the BackgroundColor tansparent.

Thanks
 

Phayao

Active Member
Licensed User
Longtime User
Thanks for clarifying - but I meant to import an external bitmap and use it as background, i.a.w. to draw over an imported image.
I tried this:
B4X:
public Sub importBMP(bmp As Bitmap)
    xpnl_base.SetBitmap(bmp)
    xiv_base.SetBitmap(bmp)
which works, but when i save it, i got a black square.
Any suggestions ?

Thanks a lot,
Chris
 

Alexander Stolte

Expert
Licensed User
Longtime User
And how can I import a bitmap ?
1.02
  • Add Property BackgroundImage_setImage - sets a background image behind the drawing
  • Add Property BackgroundImage - gets the background image
  • Add Event Touch
set background image.JPG
 

Phayao

Active Member
Licensed User
Longtime User
Happy Easter !
Thanks so much for this new feature !
I know there could be hundreds of additional possibilities for this library - but if your precious time allows, I like to suggest one more addition: drawing straight lines in addition to "only" free hand drawing. I like to use that for underlining text in a document that I import as background image. Willing to donate a small amount to your budget. Suppose that could be useful for others as well.
Greetings, Chris
 

Phayao

Active Member
Licensed User
Longtime User
Great, thanks a lot !
There is a small bug though - after drawing a line, press undo it disappears, so far so good - but when touching the screen again, the old line reappears. This does not happen with normal draw mode.
Even after drawing several lines and delete them by several undo's - drawing a new line causes the old lines to reappear.

Sorry my abilities are too limited to find the bug in the source code :-(
Greetings,
Chris
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.05
    • Add CropImageOnExport - exports the image with its dimensions and from the painted
The ASDraw-View is as big as my mobile phone, the picture I want to paint but not, if I had the option off now, there would be black bars on top and bottom if i export the image.
CropImageOnExport = True
Screenshot_20200716-104712.jpgScreenshot_20200716-104408.jpg
CropImageOnExport = False
Screenshot_20200716-110143.jpg
 
Top