iOS graphic rotate adds in a strange angle

[Ryan_Hartz]

Hi there. I am playing around with rotate to make a different-looking top title bar. I am making an oval, rotating it slightly, and placing it at the very top (TopLayoutGuide.Bottom + SG). When run in the Simulator, I see a weird angle in the upper-right where it does not fill to the top (see first image). The second image is the same layout and code, but without the rotate, and this one fills correctly across the top as expected. Any ideas? Xojo 2021 r3.1, Xcode 13.1, Monterey

Only tested in Simulator and not on a device, so not sure if this is an issue with rotate in iOS or Simulator issue

Here is the code in Paint

'button background
dim linearBrush As New LinearGradientBrush
linearBrush.StartPoint = New Point(g.Width / 2, 0)
linearBrush.EndPoint = New Point(g.Width / 2, g.Height)
linearBrush.GradientStops.Add(New Pair(0.4, color.Blue))
linearBrush.GradientStops.Add(New Pair(1.0, Color.White))

g.Brush = linearBrush

// Rotate the entire drawing area around its center
// and draw a rectangle
g.Rotate(0.0983, g.Width / 2, g.Height / 2) // Pi / 32 = 0.0983
g.FillOval(-10, -55, g.Width + 30, g.Height + 30)

'reset shadowbrush
g.Brush = nil

g.Rotate(-0.0983, g.Width / 2, g.Height / 2)
g.DrawingColor = color.White
g.Font = font.SystemFont(30)

dim h as String = "Dietitian Exam To Go"
g.DrawText(h, (g.width - g.TextWidth(h)) / 2, g.Height * 0.35)  'centers horizontally

[Jason_King]

What are you expecting the rotate to do? You cant draw above the top bar unless you disable it with a declare to get fullscreen. It seems the rotation is causing the clipping because it is rotating, you just cant see the other part because it was moved “up” into space you dont control.

[Ryan_Hartz]

IDK if it is actually a “very top” issue. Here is the canvas moved down on the screen below another canvas. (pay no attention to my art. just adding things and playing around with sizes for now ). I am just trying out different styles for the app. Was thinking to use this rotated oval as a neat top title area

[Jason_King]

Ok but if its below another canvas it will still be clipped. You cant draw outside of the bounds of a canvas. If you move where you are drawing the oval down so it is in the center of the canvas everything should work fine

[Ryan_Hartz]

Oh, and I did want the oval “clipped” at the top to show only the bottom half of it. In the code, I have the top of the draw set to -55, so it would draw the whole oval, rotate it, and display only the bottom piece of it

[Ryan_Hartz]

@Tim_Parnell

I think the problem is the gap at the top right corner, not the canvas bounds.

That is the part I am concerned with, yes

[Tim_Parnell]

I since figured out what Jason meant by the bounds being the problem. Since you draw the oval first and then rotate, I think the bounds do cause the problem. Have you tried using a https://documentation.xojo.com/api/graphics/object2d.html to draw the Oval already rotated?

[Ryan_Hartz]

@Tim_Parnell

Have you tried using a Object2D - Xojo Documentation to draw the Oval already rotated?

I have not but will give this a try now

[Jason_King]

When you first draw the oval, part of it is “off screen” in regard to the canvas. This doesnt fill in your gradient, this fills in nothing because you cant draw outside. It will be the same drawing within a picture - there is nothing to actually hold the pixels you draw so they arent rendered. Then when you rotate, it has no data for the newly exposed area and you see the white. Tim’s suggestion of Object2D should solve your problem, or you can draw your oval in the center of something like a picture, do the rotation and whatever other effects, then draw that picture into your canvas clipped to the appropriate bounds you want to display.

[Ryan_Hartz]

@Jason_King

When you first draw the oval, part of it is “off screen” in regard to the canvas. This doesnt fill in your gradient, this fills in nothing because you cant draw outside. It will be the same drawing within a picture - there is nothing to actually hold the pixels you draw so they arent rendered. Then when you rotate, it has no data for the newly exposed area and you see the white.

Out of curiosity, is this only the case for iOS? My goal is achieved in desktop (fills the whole top across and does not angle cutoff on the top-right). I am going to play around with Object2D still but curious as to why desktop shows as expected but iOS does not