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

 

[Alexander Stolte]

Update
1.01

• Fix B4J Draw Bug
• Fix Import
• Fix Resize

 

[Phayao]

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]

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]

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:

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]

wait for tomorrow, i will update the class to this feature.

 

[Alexander Stolte]

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

 

[Phayao]

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

 

[Alexander Stolte]

Happy Easter !

Thanks, you too.

drawing straight lines

I'll check this out.

Thanks

 

[Alexander Stolte]

drawing straight lines in addition to "only" free hand drawing.

1.03

• Add new mode to DrawMode: Line
• 

Happy Easter

 

[Phayao]

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]

Thanks and try it now.
1.04

• Bug Fixes

 

[Alexander Stolte]

New B4I Example

 

[Alexander Stolte]

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

CropImageOnExport = False

 

[Alexander Stolte]

Update

• 1.06
  • Add RotateImage - rotate the background image to the degree you want

it is recommended to set 90 degree steps to avoid bugs

 

[Almora]

hi..

import and export the drawing for later use

can you give an example of this..
thnks..

 

[Alexander Stolte]

can you give an example of this..

ASDraw.ImportDrawing(ASDraw.ExportDrawing,True)

 

[Alireza.4783]

Hello. Can you add the image background eraser feature? Do this with the user touch.

 

[stari]

@Alexander Stolte , great and very useful .
Thks

 

[Alexander Stolte]

Update

• 1.08
  • BugFix better resize handling with background images
  • Intern Function IIF renamed to iif2

Is freeware again.