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

Attachments

  • B4X Example.zip
    36.2 KB · Views: 357
  • ASDraw.b4xlib
    3.5 KB · Views: 338
Last edited:

LucaMs

Expert
Licensed User
Longtime User
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

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
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)
 
Top