Android Question Drowing diamond

yaniv hanya

Active Member
Licensed User
holle
I'm new to graphics and I need to make a diamond shape that will be transparent both on the outside and on the inside.
And fill it with the change of temperature,
so that it sometimes has to look like this

and sometimes like this

(the top is gradient)
with all the situations on the way.
What's the best way to do that
(I thought I'd place a picture below the picture of the diamond and omve it accordingly,
but the outside of the diamond should be transparent so that the activity background will bevisible)
 
Sort by date Sort by votes

Devv

Active Member
Licensed User
Longtime User
I think you should make an animated gif and control it with gif library
 
Upvote 0

ilan

Expert
Licensed User
Longtime User

there are a lot of ways to do that. i would say doing it with canvas would be the simplest and dynamic way.
here is a simple example on how to do that (i am using b4j because its simpler for such stuff but its 99% the same for b4a):



B4X: 
#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private img1 As ImageView
    Private vpW, vpH As Float
    Private xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
    
    vpW = MainForm.RootPane.Width
    vpH = MainForm.RootPane.Height
    
    img1.Initialize("")
    MainForm.RootPane.AddNode(img1,vpW*0.4,vpH*0.4,vpW*0.2, vpH*0.2)
    CSSUtils.SetBackgroundColor(MainForm.RootPane, fx.Colors.Yellow)
    
    For i = 0 To 75
        img1.SetImage(drawdiamond(i,vpW*0.2,vpH*0.2,xui.Color_Cyan))
        Sleep(25)
    Next
    
    For i = 75 To 0 Step -1
        img1.SetImage(drawdiamond(i,vpW*0.2,vpH*0.2,xui.Color_Cyan))
        Sleep(25)
    Next
End Sub

Sub drawdiamond(percent As Int, width As Float, height As Float, color As Int) As B4XBitmap
    Dim cnv As B4XCanvas
    Dim myimage As B4XView = xui.CreatePanel("")
    myimage.SetLayoutAnimated(0,0,0,width,height)
    cnv.Initialize(myimage)
    Dim path As B4XPath
    path.Initialize(width/2,0)
    path.LineTo(width,height/2)
    path.LineTo(width/2,height)
    path.LineTo(0,height/2)
    path.LineTo(width/2,0)
    cnv.DrawPath(path,color,True,1)
    cnv.ClipPath(path)
    Dim linheight As Float = height/100 '100 lines
    For i = 0 To percent-1
        cnv.DrawLine(0,i*linheight,width,(i*linheight)+linheight,xui.Color_ARGB(255,255,255,255),2)
    Next
    cnv.RemoveClip
    Dim bmp As B4XBitmap = cnv.CreateBitmap
    cnv.Release
    Return bmp
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

as you can see i am creating a bitmap and returning it to an imageview. i have changed the color of the background so you can see that the diamond is transparent in the background.

you can also create a nice glowing effect if you want. the sky is the limit

good luck, ilan
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
and if you want some gradient at the top and transparent background inside the diamond you can try something like this:



B4X: 
#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private img1 As ImageView
    Private vpW, vpH As Float
    Private xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
   
    vpW = MainForm.RootPane.Width
    vpH = MainForm.RootPane.Height
   
    img1.Initialize("")
    MainForm.RootPane.AddNode(img1,vpW*0.3,vpH*0.3,vpW*0.4, vpH*0.4)
    CSSUtils.SetBackgroundColor(MainForm.RootPane, fx.Colors.Yellow)
   
    img1.SetImage(drawdiamond(25,vpW*0.2,vpH*0.2,xui.Color_Cyan))
End Sub

Sub drawdiamond(percent As Int, width As Float, height As Float, color As Int) As B4XBitmap 'ignore
     Dim cnv As B4XCanvas
    Dim myimage As B4XView = xui.CreatePanel("")
    myimage.SetLayoutAnimated(0,0,0,width,height)
    cnv.Initialize(myimage)
    Dim path As B4XPath
    path.Initialize(width/2,0)
    path.LineTo(width,height/2)
    path.LineTo(width/2,height)
    path.LineTo(0,height/2)
    path.LineTo(width/2,0)
    'cnv.DrawPath(path,color,True,1)
    cnv.ClipPath(path)
    Dim numberoflines As Int = 100
    Dim linheight As Float = height/numberoflines '100 lines
    Dim alphastep As Int
    Dim counter As Int = 0
    Dim fadeoutstep As Int = 255/((numberoflines-percent)*0.2)
    For i = numberoflines To percent-1 Step -1
        If counter > ((numberoflines-percent)*0.8) Then alphastep = Max(0,alphastep-fadeoutstep)Else alphastep = 255
        Log(alphastep)
        cnv.DrawLine(0,(i*linheight),width,((i*linheight)+linheight),xui.Color_ARGB(alphastep,0,255,255),2)
        counter = counter + 1
    Next
    cnv.RemoveClip
    Dim bmp As B4XBitmap = cnv.CreateBitmap
    cnv.Release
    Return bmp
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
Android Question Cut out shapes from canvas
Replies
2
Views
2K
Yvon Steinthal
  • Article
B4A Library BAJLocale: A holistic approach to internationalization for B4(A/J) application (Part 2)
Replies
3
Views
4K
cimperia
  • Question
Android Question Weird Astream crash issue
Replies
15
Views
3K
Erel
  • Article
Android Tutorial How to make games
2 3
Replies
53
Views
69K
melonZgz
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…