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.

Spoiler: Dependencies/Libraries you need for this view

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

Draw what you want

use a eraser

set a background image

draw lines

Examples

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

 

[LucaMs]

Now there is a problem with your custom views: their name...
AS Draw

with the new B4X feature ".As"...

(I'm kidding, of course ?)

 

[yzhy-mail]

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

 

[Alexander Stolte]

The view only returns the bitmap, how you save it is up to you.
According to the forum search, this is a deliberate behavior, because the background is transparent and in jpg it is just black.

 

[yzhy-mail]

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.

 

[mkf]

​

Hello
Thank you for your useful library
I want to give the photo online in the background using the Picasso Library
please guide me

 

[rnlev]

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]

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]

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

 

[Alexander Stolte]

I thought it was supposed to run on all platforms -_-

it works on B4J!!!!
I only wrote that I had no motivation to do the example project for b4j in the designer.

 

[jvetterli]

@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]

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]

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.

 

[Alexander Stolte]

catch the MotionEvent data on touch, like it's available with the Gesture Detector library.

??

Sub ASDraw1_Touch (Action As Int, XY As Map)
    'Log("Action: " & Action)
    'Log("X: " & XY.Get("X"))
    'Log("Y: " & XY.Get("Y"))
End Sub

 

[irda]

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.

 

[Alexander Stolte]

As it is based on CanvasView and Fabricview

It is not based on these 2 components. The view is based on bitmapcreator, you would have to program the whole thing yourself.

 

[jvetterli]

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?

 

[Alexander Stolte]

Anybody else happened the same thing?

Download the lib. again, maybe its solved now.

 

[Alexander Stolte]

Update

• 1.10
  • BugFixes