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: 85
  • ASDraw.b4xlib
    3.5 KB · Views: 76
Last edited:
Top