B4J Question 3 gradiant fill with drawarc

Nokia

Active Member
Licensed User
Longtime User
I have an arc that starts at 270 and sweeps for 200 degrees. trying to figure out how to do a 3 color gradient.. was trying to use example from Erel's circular progress bar but not working for me.

B4X:
        Dim startAngle = 170, sweepAngle = Value / GraphMaxValue * 201 As Float
        Dim cColor As Int = xui.PaintOrColorToColor(CarrotColor)
        bc.DrawArc2(cx, cy, radius, fullBrush, False, stroke, startAngle, 200)
        If ShowScale = True Then
            Dim sColor As Int = xui.PaintOrColorToColor(ScaleColor)
            bc.DrawArc(cx, cy, radius - stroke, sColor, False, 8dip, 10 - 2, 2)
            bc.DrawArc(cx, cy, radius - stroke, sColor, False, 8dip, 320 - 1, 2)
            bc.DrawArc(cx, cy, radius - stroke, sColor, False, 8dip, 270 - 1 , 2)
            bc.DrawArc(cx, cy, radius - stroke, sColor, False, 8dip, 220 - 1 , 2)
            bc.DrawArc(cx, cy, radius - stroke, sColor, False, 8dip, 170, 2)
        End If
        bc.DrawArc(cx, cy, radius + 5, cColor, False, stroke + CarrotLength, startAngle - (CarrotWidth / 2) + sweepAngle , CarrotWidth)

    If ShowCarrotGoal = True Then
        Dim GoalsweepAngle = CarrotGoalValue / GraphMaxValue * 201 As Float
        Dim cGColor As Int = xui.PaintOrColorToColor(CarrotGoalColor)
        bc.DrawArc(cx, cy, radius + 5, cGColor, False, stroke + 5, startAngle - (CarrotGoalWidth / 2) + GoalsweepAngle , CarrotGoalWidth)
    End If

B4X:
    bc.Initialize(iv.Width, iv.Width)
    Dim g As BitmapCreator
    g.Initialize(bc.mWidth, bc.mHeight)
    Dim r As B4XRect
    r.Initialize(0, 0, bc.mWidth, 2) 'ignore
    bc.FillGradient(Array As Int(clr1, clr2, clr3), r, "LEFT_RIGHT")
    For y = 0 To g.mHeight - 1
        For x = 0 To g.mWidth - 1
            Dim angle As Float = ATan2D(y - cy, x - cx) + 190.5
            Log("Angle: " & angle)
            If angle < 0 Then angle = angle + 360
            g.CopyPixel(bc, bc.mWidth * angle / 360, 0, x, y)
        Next
    Next
    fullBrush = bc.CreateBrushFromBitmapCreator(g)

trying to have green on left, yellow in middle top and red on right. see attached.
 

Attachments

  • SweepGraph1.jpg
    SweepGraph1.jpg
    10.9 KB · Views: 110
  • SweepGraph2.jpg
    SweepGraph2.jpg
    10.8 KB · Views: 114

Erel

B4X founder
Staff member
Licensed User
Longtime User
There is no built-in sweep gradient like this in BitmapCreator. It is possible to create one with some work (check the source code).

Another option is to use a left right gradient:

1690865047168.png


B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    Dim GradientBrush As BCBrush = CreateGradientBrush
    ImageView1.SetBitmap(DrawArc(GradientBrush))
End Sub

Private Sub DrawArc(Brush As BCBrush) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(ImageView1.Width, ImageView1.Height)
    bc.DrawArc2(ImageView1.Width / 2, ImageView1.Height / 2, ImageView1.Width / 2, Brush, False, 20dip, 20, -220)
    Return bc.Bitmap    
End Sub

Private Sub CreateGradientBrush As BCBrush
    Dim bc As BitmapCreator
    bc.Initialize(ImageView1.Width, ImageView1.Height)
    bc.FillGradient(Array As Int(0xFF089E00, 0xFFD2DA00, 0xFFE3EC00, 0xFFD2DA00, 0xFFFF070C), bc.TargetRect, "LEFT_RIGHT")
    Return bc.CreateBrushFromBitmapCreator(bc)
End Sub
 
Upvote 0

Nokia

Active Member
Licensed User
Longtime User
There is no built-in sweep gradient like this in BitmapCreator. It is possible to create one with some work (check the source code).

Another option is to use a left right gradient:

View attachment 144313

B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    Dim GradientBrush As BCBrush = CreateGradientBrush
    ImageView1.SetBitmap(DrawArc(GradientBrush))
End Sub

Private Sub DrawArc(Brush As BCBrush) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(ImageView1.Width, ImageView1.Height)
    bc.DrawArc2(ImageView1.Width / 2, ImageView1.Height / 2, ImageView1.Width / 2, Brush, False, 20dip, 20, -220)
    Return bc.Bitmap   
End Sub

Private Sub CreateGradientBrush As BCBrush
    Dim bc As BitmapCreator
    bc.Initialize(ImageView1.Width, ImageView1.Height)
    bc.FillGradient(Array As Int(0xFF089E00, 0xFFD2DA00, 0xFFE3EC00, 0xFFD2DA00, 0xFFFF070C), bc.TargetRect, "LEFT_RIGHT")
    Return bc.CreateBrushFromBitmapCreator(bc)
End Sub

Thanks for the update Erel..

using source, I can get the end angle right, but I can't get the begin angle right..

B4X:
    bc.Initialize(iv.Width, iv.Width)
    Dim g As BitmapCreator
    g.Initialize(bc.mWidth, bc.mHeight)
    Dim r As B4XRect
    r.Initialize(0, 0, bc.mWidth, 2) 'ignore
    bc.FillGradient(Array As Int(clr1, clr2, clr3), r, "LEFT_RIGHT")
    For y = 0 To g.mHeight - 1
        For x = 0 To g.mWidth - 1
            Dim angle As Float = ATan2D(y - cy, x - cx) + 190.5
            If angle < 0 Then angle = angle + 200
            g.CopyPixel(bc, bc.mWidth * angle / 200, 0, x, y)
        Next
    Next
    fullBrush = bc.CreateBrushFromBitmapCreator(g)

it always turns back to the 180-degree mark. can't get it to rotate.
 

Attachments

  • SweepGraph3.jpg
    SweepGraph3.jpg
    7.2 KB · Views: 113
  • SweepGraph4.jpg
    SweepGraph4.jpg
    7.3 KB · Views: 105
Upvote 0
Top