B4A Library ABExtDrawing 1.0

alwaysbusy · Feb 3, 2012

ABExtDrawing 1.7

ABExtDrawing is a wrapper around the Android Drawing classes.

14/08/2012: Updated to version 1.7

Bugfixes and additional functions for blurring and masks.

16/02/2012: Updated to version 1.1

It makes it possible to access all the drawing functions of the Canvas. It is like the B4A canvas, but you can also use all Paints.

Several sub objects are also 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
ABCamera: a wrapper for the Camera class [NEW version 1.1]
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 lib is to big to list all 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

How to use this library:

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

B4X:

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:

B4X:

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

B4X:

        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:

B4X:

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

For more information on what is possible, look into the Android documentation

There is a new article on the Camera class (see the AB3DCamera project) that shows you how to make a 3D list with ABExtDrawing 1.1. The article can be found at Alwaysbusy's Corner. The project is also attached to this post.

victormedranop · Mar 8, 2017

I'm trying to rotate an image but no luck.

B4X:

Sub [B]Process_Globals[/B]
Dim ExDraw As ABExtDrawing
End Sub
Sub [B]Globals[/B]
Dim MyCanvas As Canvas
Dim Panel1 As Panel
End Sub
Sub [B]Activity_Create[/B](FirstTime As Boolean)
Activity.LoadLayout("1")
Panel1.Initialize("Panel1")
Panel1.Width = 20dip
Panel1.Height = 20dip
Dim m As ABMatrix
m.Initialize
m.postRotate(45)
m.postTranslate(10dip,10dip)
Dim b As Bitmap
Dim pnt As ABPaint
MyCanvas.Initialize(Panel1)
b.Initialize(File.DirAssets,"1488957559_swipe_left.png")
ExDraw.drawBitmap4(MyCanvas,b,m,pnt)
End Sub
[\code]

DonManfred · Mar 8, 2017

victormedranop said:
I'm trying to rotate an image but no luck.

You did not added the Panel to the activity.
If the Panel is inside the loaded layout then you should not initialize the panel.
Did you get any error? WHICH???

almontgreen · Mar 8, 2017

See the code Erel posted here: https://www.b4x.com/android/forum/posts/248945/

swChef · May 30, 2017

alwaysbusy said:
I'm not currently working in B4A (other project, other language) but it should be something like this:

Dim magnifier As Double = 100
Dim OriginalTextSize As Double = 20

myExDraw.save(tmpCanv)
myExDraw.scale(tmpCanv, 1/magnifier, 1/magnifier)

' hovever the paint is build
Dim mDegreeMarkingsPaint As ABPaint
mDegreeMarkingsPaint.Initialize
mDegreeMarkingsPaint.setDither(True)
mDegreeMarkingsPaint.setAntiAlias(True)
mDegreeMarkingsPaint.SetTextSize(OriginalTextSize * magnifier)

myExDraw.drawText(tmpCanv, "mytext", x * magnifier, y * magnifier, mDegreeMarkingsPaint)

myExDraw.restore(tmpCanv)

I just took a look at this work, and made a few changes. This looks good on higher and lower density devices I have.

B4X:

Sub InitDrawingTools()
...
    ScalePaint.SetAntiAlias(True)
    ScalePaint.SetDither(True) ' added
    ScalePaint.SetLinearText(True) ' added
...
End Sub

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

    ExDraw.save2(Canv, ExDraw.MATRIX_SAVE_FLAG)

    Dim fMag As Float = 25
    Dim fOTS As Float = ScalePaint.GetTextSize
    Dim fOSW As Float =    ScalePaint.GetStrokeWidth
    ScalePaint.SetTextSize(fMag*fOTS)
    ScalePaint.SetStrokeWidth(fOSW*fMag)
    ExDraw.scale(Canv, 1/fMag, 1/fMag)
   
    Dim i As Int
    Dim y1 As Float
    Dim y2 As Float
    Dim y3 As Float
    Dim value As Int
    Dim valueString As String
    For i = 0 To totalNicks
        y1 = scaleRect.top
        If (i Mod 5 = 0) Then
            y2 = y1 - 0.025 ' for the 5 degree nicks
        Else
            y2 = y1 - 0.018
        End If
        y3 = y1 - 0.020 - 0.015
       
        value = nickToDegree(i)
        If (value >= minDegrees And value <= maxDegrees) Then
            ExDraw.drawLine(Canv, 0.5*fMag, fMag*y1, 0.5*fMag, fMag*y2, ScalePaint)
           
            If (i Mod 5 = 0) Then   
                valueString = value
                ExDraw.drawText(Canv, valueString, 0.5*fMag,fMag*y3, ScalePaint)
            End If
        End If
       
        ExDraw.rotate2(Canv, degreesPerNick, 0.5*fMag,fMag* 0.5)
    Next

    ScalePaint.SetStrokeWidth(fOSW)
    ScalePaint.SetTextSize(fOTS)
    ExDraw.restore(Canv)
End Sub

Sub nickToDegree(Nick As Int) As Int
    Dim rawDegree As Int
    If (Nick < totalNicks / 2) Then
        rawDegree = Nick*2
    Else
         rawDegree = (Nick - totalNicks) * 2
    End If
   
    Dim shiftedDegree As Int
   
    shiftedDegree = rawDegree + centerDegree
    Return shiftedDegree
End Sub

B4A Library ABExtDrawing 1.0

Attachments

victormedranop

Well-Known Member

DonManfred

Expert

almontgreen

Active Member

swChef

Active Member

B4A Library ABExtDrawing 1.0

Attachments

victormedranop

Well-Known Member

DonManfred

Expert

almontgreen

Active Member

swChef

Active Member

Privacy & Transparency

Privacy & Transparency