B4A Gráfico. Máscara. DrawCircle.

- Presentación.

- Bajar Mascara

- Este programa está basado en uno que podemos encontrar en los tutoriales de B4A, dedicado a los gráficos.

- En mi caso he puesto dos imágenes. Una de fondo y otra en donde solo se puede ver un círculo movible.

- Al mover el círculo por la pantalla, se ve una parte de la imagen de fondo.

- En este programa no he utilizado el Designer y por tanto no tiene archivo layout. Los controles (View) se crean en el código.

- Es necesario dos imágenes.

Creamos los controles directamente desde el código

¿Quién se esconde bajo esta máscara?

- Mueve el círculo por su rostro y lo verás.

- Los elementos View, se crean mediante el código, así que no hace falta Designer y layout.

____________________________
- Código (copia y pega).

Código del programa en Basic4Android

' Adaptado por Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Process_Globals

End Sub

Sub Globals
    Dim pnlLayer As Panel
    Dim cvsLayer As Canvas
    Dim btnLayer As ToggleButton
    Dim bmpBackground, bmpBackground2 As Bitmap
    Dim bmdBackground, bmdBackground2 As BitmapDrawable
    Dim xc, yc, x1, y1, r1, r2, h, w As Float
    Dim DestRect As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)

        If FirstTime Then
        ' Fondos de pantalla del Activity
        bmpBackground.Initialize(File.DirAssets,"cara1.gif")
        bmpBackground2.Initialize(File.DirAssets,"cara2.gif")
        bmdBackground.Initialize(bmpBackground)
        bmdBackground2.Initialize(bmpBackground2)
        Activity.Background = bmdBackground
    
           ' Crea un Panel
            pnlLayer.Initialize("pnlLayer")
            ' Activity.AddView(pnlLayer, 0, 0, 100%x, 85%y)
            Activity.AddView(pnlLayer, 0, 0, 100%x, 100%y)

            ' Crea un Canvas en el Panel
            cvsLayer.Initialize(pnlLayer)
            
            ' Crea el ToggleButton
               x1 = 2%x
            w = 30%x
            y1 = 100%y - 55dip
            h = 50dip
             btnLayer.Initialize("btnLayer")
            Activity.AddView(btnLayer, x1, y1, w, h) ' Posicion, ancho y alto
            btnLayer.TextOn = "Fondo"
            btnLayer.TextOff = "Lupa"
            btnLayer.Checked = True
                
           DestRect.Initialize(0dip, 0dip, 100%x,100%y)
    End If

End Sub

Sub Activity_Resume
    Drawing
End Sub


Sub Drawing
   '  cvsLayer.DrawColor(Colors.Cyan)
    cvsLayer.DrawBitmap(bmpBackground2,Null,DestRect)    

    xc = 90dip
    yc = 130dip    
    r1 = 40dip
    cvsLayer.DrawCircle(xc, yc, r1, Colors.Blue, True, 3dip)
    r2 = 35dip
    cvsLayer.DrawCircle(xc, yc, r2, Colors.Transparent, True, 1dip)

End Sub

Sub btnLayer_CheckedChange(Checked As Boolean)
    Dim Send As Button    
    Send = Sender
    pnlLayer.Visible = Not(pnlLayer.Visible)
End Sub

Sub pnlLayer_Touch (Action As Int, X As Float, Y As Float)
    ' cvsLayer.DrawCircle(xc, yc, r1, Colors.red, True, 3dip)
    cvsLayer.DrawBitmap(bmpBackground2,Null,DestRect)

    xc = X
    yc = Y
    cvsLayer.DrawCircle(xc, yc, r1, Colors.Blue, True, 3dip)
    cvsLayer.DrawCircle(xc, yc, r2, Colors.Transparent, True, 1dip)
    pnlLayer.Invalidate
End Sub

____________________________
- Comentarios.

- Mediante el código se crea un Panel, un Canvas y un ToggleButton.

- Se pone el fondo de pantalla mediante los archivos cara1.gif y cara2.gif, que se encuentran en la carpeta: \Mascara\Files

- Cuando tocamos (touch) el Panel, se dibuja un doble círculo, uno de ellos transparente para que se vea el dibujo de fondo.

r1 = 40dip
cvsLayer.DrawCircle(xc, yc, r1, Colors.Blue, True, 3dip)
r2 = 35dip
cvsLayer.DrawCircle(xc, yc, r2, Colors.Transparent, True, 1dip)