Basic4Android: new library ABExtDrawing

ABExtDrawing is a library I wrote to access more from the Android Drawing classes in B4A. It extends the B4A canvas so you can also use all Paint, Matrix, Region, ColorMatrix and Path functionalities.

Several sub objects are included:
ABPaint: a wrapper for thePaint class
ABMatrix: a wrapper for the Matrix class
ABRegion: a wrapper for the Region class
ABColorMatrix: a wrapper for the ColorMatrix class
ABRgbFunctions: several functions to manipulate RGB values

Also two extended classes
ABRectF: a wrapper around the RectF class. B4A contains the Rect class, but to use some of the functions of this library I needed the float version of Rect.
ABPath: a full wrapper for the Path class. B4A contains the Path class but only exposes LineTo. ABPath exposes all functions (like addArc, addOval, etc…)

This library is to big to list all the functions, but a lot of them are used in the attached demo. It is a B4A translation of the Thermometer project on Mind The Robot http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/

How to use this library:

The main object is ABExtDrawing. You pass the B4A canvas to each function:

Sub Globals
        Dim ExDraw As ABExtDrawing
        Dim MyCanvas As Canvas
        Dim Panel1 as Panel
end Sub

Sub Activity_Create(FirstTime As Boolean)
        If FirstTime Then
		Activity.LoadLayout("2")
		MyCanvas.Initialize(Panel1)
	End If
        drawRim(MyCanvas)
End Sub

Sub drawRim(Canv As Canvas)
	' first, draw the metallic body
	ExDraw.drawOval(Canv, rimRect, rimPaint)
	' now the outer rim circle
	ExDraw.drawOval(Canv, rimRect, rimCirclePaint)
End Sub

The fun part is you can create all kind of Paints:

        ' the linear gradient Is a Bit skewed For realism
	rimPaint.Initialize
	rimPaint.SetFlags(rimPaint.flag_ANTI_ALIAS_FLAG)
	rimPaint.SetLinearGradient2(1,0.40, 0.0, 0.60, 1.0, Colors.RGB(0xf0, 0xf5, 0xf0),Colors.RGB(0x30, 0x31, 0x30),rimPaint.ShaderTileMode_CLAMP)
	rimPaint.DoShaderSingle(1)

	rimCirclePaint.Initialize
	rimCirclePaint.SetAntiAlias(True)
	rimCirclePaint.SetStyle(rimCirclePaint.Style_STROKE)
	rimCirclePaint.SetColor(Colors.ARGB(0x4f, 0x33, 0x36, 0x33))
	rimCirclePaint.SetStrokeWidth(0.005)

Or make extended Paths:

        handPath.Initialize
	handPath.moveTo(0.5, 0.5 + 0.2)
	handPath.lineTo(0.5 - 0.010, 0.5 + 0.2 - 0.007)
	handPath.lineTo(0.5 - 0.002, 0.5 - 0.32)
	handPath.lineTo(0.5 + 0.002, 0.5 - 0.32)
	handPath.lineTo(0.5 + 0.010, 0.5 + 0.2 - 0.007)
	handPath.lineTo(0.5, 0.5 + 0.2)
	handPath.addCircle(0.5, 0.5, 0.025, handPath.Direction_CW)

You can also use the Save and Restore functions of the canvas:

Sub drawScale(Canv As Canvas)
	ExDraw.drawOval(Canv, scaleRect, ScalePaint)

	ExDraw.save2(Canv, ExDraw.MATRIX_SAVE_FLAG)
	Dim i As Int
	Dim y1 As Float
	Dim y2 As Float
	Dim value As Int
	Dim valueString As String
	For i = 0 To totalNicks
		y1 = scaleRect.top
		y2 = y1 - 0.020

		ExDraw.drawLine(Canv, 0.5, y1, 0.5, y2, ScalePaint)

		If (i Mod 5 = 0) Then
			value = nickToDegree(i)
			If (value >= minDegrees AND value <= maxDegrees) Then
				valueString = value
				ExDraw.drawText(Canv, valueString, 0.5, y2 - 0.015, ScalePaint)
			End If
		End If

		ExDraw.rotate2(Canv, degreesPerNick, 0.5, 0.5)
	Next
	ExDraw.restore(Canv)
End Sub

And write filters like this GreyScale filter:

Sub GrayScale(bmp As Bitmap) As Bitmap
    Dim bmpGrayscale As Bitmap
    bmpGrayscale.InitializeMutable(bmp.Width, bmp.height)
    Dim c As Canvas
    c.Initialize2(bmpGrayscale)

    Dim paint As ABPaint
    paint.Initialize

    Dim mat As ABColorMatrix
    mat.Initialize
    mat.SetSaturation(0)

    paint.SetColorMatrixColorFilter2(mat)

    ExDraw.drawBitmap2(c, bmp, 0, 0, paint)

    Return bmpGrayscale
End Sub

Because of all the possibilities this library has, I may do some more articles on this blog.

For more information on what you can do with the library, look into the Android Documentation http://developer.android.com/reference/android/graphics/Canvas.html

As a registered user, you can download the library from the Basic4Android website
The demo project can be downloaded from http://www.gorgeousapps.com/ABExtDrawingDemo.zip

Click here to Donation if you like my work

Advertisements

About Alwaysbusy

My name is Alain Bailleul and I'm the Senior Software Architect/Engineer at One-Two. I like to experiment with new technologies, Computer Vision and A.I. My projects are programmed in B4X , Xojo, C#, java, HTML, CSS and JavaScript. View all posts by Alwaysbusy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: