From Xojo Documentation
Canvas is a powerful control that can be used to display graphics, perform animation and even create custom UI controls. All drawing is done through the Paint event handler.
Below are common events, properties and method used with Canvas. Refer to iOSCanvas in the Language Reference for the complete list.
- This method is called when the Canvas contents need to be drawn. This can happen by the OS automatically or by the OS after you call the Invalidate method. In this method you are given an iOSGraphics object to which you can draw using the methods of the iOSGraphics class.
- Called when the user taps (and holds) on the Canvas. You are given the coordinates of the tap and the type of tap (single, multi-touch).
- Called when the user drags on the Canvas. You are given the coordinates of the tap and the type of tap (single, multi-touch).
- Called when the user stops touching the Canvas. You are given the coordinates of the tap and the type of tap (single, multi-touch).
- The height of the Canvas. This can change if the Canvas size changes due to the orientation changing.
- A boolean that indicates whether the Canvas is shown on the layout when the app is running.
- The width of the Canvas. This can change if the Canvas size changes due to the orientation changing.
- Call this method to tell the OS that the Canvas should be redrawn the next time the UI is updated. Call this method outside of the Canvas after you have made changes that would cause what is displayed in the Canvas to be updated.
Contains all the drawing methods and properties that are used to draw to the graphics object supplied in the Paint event handler.
Refer to iOSGraphics in the Language Reference for details on all its properties and methods.
With iOS Graphics, you can draw shapes (outline and filled), text, images, bezier paths, rotate what is drawn and much more.
With a Canvas you are primarily going to have code in the Paint event that draws something. What you want to draw can be literally anything, from custom UI controls to graphics for games. Starting simple, this code fills the entire Canvas with a blue rectangle:
g.FillRect(0, 0, g.Width, g.Height)
Similarly, you can draw text to the Canvas like this:
Var t As Text
t = "Hello, World!"
g.DrawTextLine(t, 0, 10, -1, iOSTextAlignment.Left, False) // Left-aligned
g.DrawTextLine(t, 0, 10, -1, iOSTextAlignment.Center, False) // Centered
g.DrawTextLine(t, 0, 10, 100, iOSTextAlignment.Right, False) // Right-aligned
If you have an image in your project, you can easily draw it to the Canvas:
g.DrawImage(MyImage, 0, 0)
// Draw image at half its original size
g.DrawImage(MyImage, 0, 0, MyImage.Width / 2, MyImage.Height / 2)
You can use a Timer in conjunction with a Canvas to perform animation. This code draws a square in a Canvas at the specified angle:
g.FillColor = Color.Blue
Const kSize As Integer = 100
g.FillRect((g.Width - kSize) / 2, (g.Height - kSize) / 2, kSize, kSize)
RotateAngle is a property (type of Double) on the View. A Timer that is also on the View is set with a Period of 300ms. It has this code in its Action event handler to rotate the square 45 degrees (Pi/4) each period:
RotateAngle = RotateAngle + Pi / 4
To make it rotate by smaller angles, divide Pi by larger values. The Invalidate method call is needed so that the Canvas gets told to update and redraw the square with the new angle.
These projects demonstrate various ways you can use a Canvas: