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
Code: Copy 
    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

Last edited:
Click to expand...
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
 
Phayao said:
Just not clear to me is: should I use the lib or the class - or both ?
Click to expand...
If you need the source code of this view, use the class, if not then use the lib.

Phayao said:
And how can I import a bitmap ?
Click to expand...
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
 
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:
Code: Copy 
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
 
Phayao said:
And how can I import a bitmap ?
Click to expand...
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
 
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
 
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
 
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
 
You must log in or register to reply here.
Back
Top