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
Have Fun :)
 

Attachments

  • B4X Example.zip
    230.5 KB · Views: 212
  • ASDraw.b4xlib
    3.6 KB · Views: 198
Last edited:

yzhy-mail

Member
@Alexander Stolte
I find your lib is very useful for drawing something.
When I use it .I found the formt of the exportdrawing is PNG. PNG is ok.
When i changed the format to jpeg,I just got a all black image.
I want to konw if I can get picture of JPEG format.
Thank you !
 
Last edited:

yzhy-mail

Member
Thank you !
I don't know the principle .
But I like the ASdraw lib ,so I changed to use PNG. Thougth it's bigger than JPEG.
 

rnlev

New Member
Hello. When I run the example I only see a button that does nothing when clicked. What do I need to run it? I already copied the lib fiile to the libs folder. Any other thing that I should do? Thanks.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Hello. When I run the example I only see a button that does nothing when clicked. What do I need to run it? I already copied the lib fiile to the libs folder. Any other thing that I should do? Thanks.
This is because the focus was on B4A and B4I. B4J should work, I just didn't have the motivation to do an example project for B4J.
 

rnlev

New Member
Ok, thanks.
(I thought it was supposed to run on all platforms -_-
I just can't figure out this B4x thing)
 

jvetterli

Member
Licensed User
Longtime User
@Alexander Stolte

Hi Alex, thanks a lot for this great library! I'm trying to use the export and import drawing feature, but with no success:

I have a global tmpList As List which gets filled by tmpList = ASDraw1.ExportDrawing when saving the current drawing.
After ASDraw1.clear, I use ASDraw1.ImportDrawing(tmpList,False), but nothing happens, what am I doing wrong?

Additionally, I'm wondering if there would be a possibility to use the MotionEvent data as well, since I'd like to optimize the usage for devices which are having a stylus by filtering for TOOL_TYPE_STYLUS?
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.09
    • BugFix - ExportDrawing
    • Intern Function iif2 replaced with the core iif function
A full B4X sample project has been added to the first post.

I'm trying to use the export and import drawing feature, but with no success:

I have a global tmpList As List which gets filled by tmpList = ASDraw1.ExportDrawing when saving the current drawing.
After ASDraw1.clear, I use ASDraw1.ImportDrawing(tmpList,False), but nothing happens, what am I doing wrong?
Thanks for reporting, it should work now.

I'm wondering if there would be a possibility to use the MotionEvent data as well
This view have a "Touch" event is that what you mean?
 

jvetterli

Member
Licensed User
Longtime User
Thanks for the quick fix, works like a charm now!

I'm looking for a method to additionally catch the MotionEvent data on touch, like it's available with the Gesture Detector library. But never mind, since it's not part of your nice solution.
 

irda

Member
Licensed User
Longtime User
Hi, great work.

As it is based on CanvasView and Fabricview, is it possible to extend the library to add shapes (circles, squares...), text and images (not only as background)?

Thanks and best regards.
 

jvetterli

Member
Licensed User
Longtime User
Good morning,

Unfortunately I've found another bug, trying to save the complete image throws an error sometimes:
asdraw_getimagecomplete (java line: 341)
java.lang.RuntimeException: Object should first be initialized (B4XBitmap)

Unfortunately I can't properly reproduce when this is happening, very strange. Anybody else happened the same thing?
 
Last edited:
Top