GraphicsPath experimental playground

General
1

Hi,
I’m playing around with the GraphicsPath class and trying to translate sample source code from the Mozilla site. I have the following code (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) and translated it to Xojo. Unfortunately the results differ (see picture).

Java

[code]for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

if (i > 1) {
  ctx.fill();
} else {
 ctx.stroke();
}

}
}[/code]
Xojo

[code]Const kPi = 3.1415926535

Var path As GraphicsPath
Var x, y, radius, startAngle, endAngle As Double
Var anticlockwise As Boolean

radius = 20 // Arc radius
startAngle = 0 // Starting point on circle

g.DrawingColor = Color.TextColor

For i As Integer = 0 To 3

For j As Integer = 0 To 2

path = New GraphicsPath

x = 25 + j * 50 // x coordinate
y = 25 + i * 50 // y coordinate
endAngle = kPi + (kPi * j) / 2 // End point on circle
anticlockwise = i Mod 2 <> 0 // clockwise or anticlockwise

path.AddArc(x, y, radius, startAngle, endAngle, anticlockwise)

If (i > 1) Then
  g.FillPath(path)
Else 
  g.DrawPath(path)
End If

Next

Next[/code]

2

I think that Xojo is right.
Arc with startAngle = 0, endAngle = 2 x Pi and anticlockwise = False is a full circle.
So, arc with startAngle = 0, endAngle = 2 x Pi and anticlockwise = TRUE is empty.
Try for example :

endAngle = kPi + (kPi * j) / 2 - 0.3

To see the difference between anticlockwise = False and anticlockwise = True

3

Thanks Eric - Hmm, that doesn’t really give me back the desired result. Does the algorithm need to be modified elsewhere?

4

Change:

Const kPi = 3.1415926535

to

Const kPi = 3.141592653589793
5

@Martin_T how did this work for you? I am trying to do the math to draw a donut.

Thanks!

6

What do you mean?

7

Were you able to get this to work to your satisfaction?

8 
Const kPi = 3.141592653589793

Var path As GraphicsPath
Var x, y, radius, startAngle, endAngle As Double
Var anticlockwise As Boolean

radius = 20 // Arc radius
startAngle = 0 // Starting point on circle

g.DrawingColor = Color.Red

For i As Integer = 0 To 3
  
  For j As Integer = 0 To 2
    
    path = New GraphicsPath
    
    x = 25 + j * 50 // x coordinate
    y = 25 + i * 50 // y coordinate
    endAngle = kPi + (kPi * j) / 2 // End point on circle
    anticlockwise = i Mod 2 <> 0 // clockwise or anticlockwise
    
    path.AddArc(x, y, radius, startAngle, endAngle, anticlockwise)
    
    If (i > 1) Then
      
      g.FillPath(path)
      
    Else
      
      g.DrawPath(path)
      
    End If
    
  Next
  
Next
1 Like