B4A Library [B4X] [XUI] AS Draw (FabricView and CanvasView)

Alexander Stolte · Mar 30, 2020

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

Draw what you want

use a eraser

set a background image

draw lines

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

LucaMs · Jul 21, 2021

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 · Dec 16, 2021

@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 · Dec 16, 2021

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 · Dec 16, 2021

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 · Apr 22, 2022

Alexander Stolte said:

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 · Dec 26, 2022

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 · Dec 27, 2022

rnlev said:
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 · Dec 28, 2022

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

Alexander Stolte · Dec 28, 2022

rnlev said:
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 · Mar 17, 2023

@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 · Mar 17, 2023

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.

jvetterli said:
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.

jvetterli said:
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 · Mar 17, 2023

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 · Mar 17, 2023

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

??

B4X:

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 · Mar 20, 2023

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 · Mar 20, 2023

irda said:
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 · Mar 22, 2023

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 · Mar 22, 2023

jvetterli said:
Anybody else happened the same thing?

Download the lib. again, maybe its solved now.

B4A Library [B4X] [XUI] AS Draw (FabricView and CanvasView)

Attachments

LucaMs

Expert

yzhy-mail

Member

Alexander Stolte

Expert

yzhy-mail

Member

mkf

New Member

rnlev

New Member

Alexander Stolte

Expert

rnlev

New Member

Alexander Stolte

Expert

jvetterli

Member

Alexander Stolte

Expert

jvetterli

Member

Alexander Stolte

Expert

irda

Member

Alexander Stolte

Expert

jvetterli

Member

Alexander Stolte

Expert

B4A Library [B4X] [XUI] AS Draw (FabricView and CanvasView)

Attachments

Expert

Member

Expert

Member

New Member

New Member

Expert

New Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Privacy & Transparency

Privacy & Transparency