UserGuide:iOS Canvas

Events

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.

PointerDown

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).

PointerDrag

Called when the user drags on the Canvas. You are given the coordinates of the tap and the type of tap (single, multi-touch).

PointerUp

Called when the user stops touching the Canvas. You are given the coordinates of the tap and the type of tap (single, multi-touch).

Properties

Height

The height of the Canvas. This can change if the Canvas size changes due to the orientation changing.

Visible

A boolean that indicates whether the Canvas is shown on the layout when the app is running.

Width

The width of the Canvas. This can change if the Canvas size changes due to the orientation changing.

Methods

Invalidate

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.

iOS Graphics

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.

Usage

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.FillColor = Color.Blue
g.FillRect(0, 0, g.Width, g.Height)

Similarly, you can draw text to the Canvas like this:

g.FillColor = Color.Blue
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:

// MyImage is an image added to the project
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.Rotate(RotateAngle, g.Width / 2, g.Height / 2)
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:

Const Pi = 3.14159
RotateAngle = RotateAngle + Pi / 4
Canvas1.Invalidate

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.

Example Projects

These projects demonstrate various ways you can use a Canvas:

Examples/iOS/Controls/TouchCanvas
Examples/iOS/Controls/SwipeExample
Examples/iOS/Graphics/AnalogClock
Examples/iOS/Graphics/CanvasDrawDrag
Examples/iOS/Graphics/ClipExample
Examples/iOS/Graphics/DiceRoller
Examples/iOS/Graphics/PathExample
Examples/iOS/Graphics/Psychedelic
Examples/iOS/Graphics/RotationExample
Examples/iOS/Graphics/SineWaves
Examples/iOS/Graphics/SparkleTouch
Examples/Games/2K/2K-iOS
Examples/Games/Sliders/Sliders-iOS
Examples/Games/SpaceRocks/SpaceRocksiOS
Examples/Games/Turtle/Turtle-iOS

UserGuide

iOS Canvas

From Xojo Documentation

Contents