Class

Canvas


Warning

This item was deprecated in version 2021r3. Please use DesktopCanvas as a replacement.

Description

Canvas controls are very useful for implementing your own graphical controls because you can use the Graphics class drawing commands or the Object2D classes to draw inside the Canvas region. It can also be used to display existing graphics, like the ImageWell.

Methods

Name

Parameters

Returns

Shared

AcceptFileDrop

FileType As String

AcceptPictureDrop

AcceptRawDataDrop

Type As String

AcceptTextDrop

Close

DrawInto

g As Graphics, x As Integer, y As Integer

Invalidate

[EraseBackground As Boolean]

Refresh

eraseBackground As Boolean

Scroll

DeltaX As Integer, DeltaY As Integer

SetFocus

Property descriptions


Canvas.Active

Active As Boolean

Indicates whether the RectControl is active.

This property is read-only.

Active is False when the RectControl's window is not in the foreground. When a Window is deactivated, its controls are automatically deactivated unless RectControl.AllowAutoDeactivate is set to False.


Canvas.AllowAutoDeactivate

AllowAutoDeactivate As Boolean

Determines whether the control should be deactivated (on macOS) when the parent window is deactivated. The default is True.


Canvas.AllowFocus

AllowFocus As Boolean

If True, the Canvas will be included in the Tab order and can accept the focus. The GotFocus and LostFocus events are called at the appropriate times.

This code enables the AllowFocus property. It is in the Open event of the control.

Me.AllowFocus = True

Canvas.AllowFocusRing

AllowFocusRing As Boolean

If True, the Canvas indicates that it has the focus with a ring around its border; if False, the appearance of the object does not change when it has the focus.

Setting this property to True has no effect on Windows or Linux. The default is True.

This code turns AllowFocusRing off.

Me.AllowFocusRing = False

Canvas.AllowTabs

AllowTabs As Boolean

If True and AllowFocus is True, then pressing Tab triggers the KeyDown event for processing. The default is False.

If False, pressing the Tab key does not trigger the KeyDown event; pressing Tab triggers the LostFocus Event and selects the next object in the window that can accept the focus.

The following turns on AllowTabs.

Me.AllowTabs = True

Canvas.AllowTabStop

AllowTabStop As Boolean

If True, the RectControl is in the Tab Order and accepts the focus when the user tabs into it. The default is True. If False, the user cannot tab into it to give it the focus. However, the RectControl can gain the focus by other means, such as the user's clicking on it or by setting the focus in code.

This example removes the control from the Tab Order:

Me.AllowTabStop = False

Canvas.Backdrop

Backdrop As Picture

The passed Picture that will automatically be drawn into the area.

You should not assign a new picture to the backdrop of the control when being inside the paint event of that control. This can lead into problems like the backdrop not being painted.

The following code assigns a jpg image to the Backdrop. The image has been added to the project. The code is in the Open event.

Me.BackDrop = HouseImage

Canvas.Enabled

Enabled As Boolean

Determines if the control should be enabled when the owning window is opened.

A disabled control cannot be clicked and cannot receive the focus.

This example disables the control. Its caption is grayed out.

Me.Enabled = False

Canvas.Handle

Handle As Integer

Returns a handle to the control.

This property is read-only.

For interfacing with Mac APIs using Declare).

On Windows returns the HWND of the control.

On Linux it returns a GtkWidget.

The following gets a handle to the control.

Var i As Integer = Me.Handle

Canvas.Height

Height As Integer

The height (in points) of the control.

This example sets the height of the control to 100:

Me.Height = 100

Canvas.Index

Index As Integer

If the control is used in a control set, this specifies the control's index in the set.

This property is read-only.

The control set is often used to manage a group of RadioButtons since a single RadioButton in a window doesn't make much sense. Most typically, you create an instance of the RadioButton, assign 0 to its Index property, and then duplicate it. This increments the value of Index for each new instance but retain the original control's name.

To determine which RadioButton the user clicked, use the Action event handler of the control set. The parameter Index contains the value of Index for the RadioButton that was clicked. The event handler is this:

Sub Action(Index As Integer)
  Label1.Text = "You chose radio button " + index.ToString + "."
End Sub

To set a RadioButton in a control set, you use its Index property to refer to the RadioButton whose value you want to set. For example, the following line selects the second RadioButton from code:

RadioButton1(1).Value = True ' 0-based

Canvas.Left

Left As Integer

The left side of the control in local coordinates (relative to the window).

The following example moves the control 100 points from the left side of the window:

Me.Left = 150

Canvas.LockBottom

LockBottom As Boolean

Determines whether the bottom edge of the control should stay at a set distance from the bottom edge of the parent control, if there is one, or the owning window.

This property can be set in the control's Inspector. The following example sets it in code.

Me.LockBottom = True

Canvas.LockLeft

LockLeft As Boolean

Determines whether the left edge of the control should stay at a set distance from the left edge of the parent control, if there is one, or the owning window.

Beginning with version 2009r5, LockLeft and Locktop default to True when you add a new control to a window. Existing controls will be altered only if LockRight and/or LockBottom are not set. LockLeft has no effect unless LockRight is True.

This property can be set in the control's Inspector. The following example sets it in code.

Me.LockLeft = True

Canvas.LockRight

LockRight As Boolean

Determines whether the right edge of the control should stay at a set distance from the right edge of the parent control, if there is one, or the owning window.

This property can be set in the control's Inspector. The following example sets it in code.

Me.LockRight = True

Canvas.LockTop

LockTop As Boolean

Determines whether the top edge of the control should stay at a set distance from the top edge of the parent control, if there is one, or the owning window.

Beginning with version 2009r5, LockTop and LockLeft default to True when you add a control to a window. Existing controls will be altered only if LockRight and/or LockBottom are not set. LockTop has no effect unless LockBottom is True.

This property can be set in the control's Inspector. The following example sets it in code.

Me.LockTop = True

Canvas.MouseCursor

MouseCursor As MouseCursor

The cursor to be displayed while the mouse is within the control and both the DesktopApplication and Window class's MouseCursor properties are Nil.

If the DesktopApplication class's MouseCursor property is not Nil or the Window's MouseCursor property is not Nil, then any control's MouseCursor property is ignored. You can use a cursor stored in the Cursors module. On Macintosh, you can also obtain a MouseCursor from a resource file.

This line in the Open event of the control sets the default cursor to the finger pointer.

Me.MouseCursor = System.Cursors.FingerPointer

Canvas.MouseX

MouseX As Integer

The X coordinate of the mouse (points). Measured from the top-left corner of the control.

This property is read-only.

This code is in the MouseDown event of a TextField and displays the X-coordinate at the point of the MouseDown event.

Me.Value = Str(Me.MouseX)

Canvas.MouseY

MouseY As Integer

The Y coordinate of the mouse (points). Measured from the top-left corner of the control.

This property is read-only.

This code is in the MouseDown event of a TextField and displays the Y-coordinate at the point of the MouseDown event.

Me.Value = Str(Me.MouseY)

Canvas.Name

Name As String

The name of the control. Set the name of the control in the Inspector.

This property is read-only.


Canvas.PanelIndex

PanelIndex As Integer

If the control has been placed on a TabPanel or PagePanel control, this is the panel (page/tab) that the control is on. If the control is not on a panel, it returns -1.

The first panel is numbered zero. If the control has been placed on a panel of a TabPanel or PagePanel control, it returns the panel number. If the control is not on a PagePanel or TabPanel, it returns -1. If you change the PanelIndex to a nonexistent panel, the control will disappear until you give it a PanelIndex value that corresponds to a panel that exists.

If you are looking to change the currently selected panel (page/tab), use PagePanel.SelectedPanelIndex.

This code displays the panel index of the control that is on the page.

Label3.Value = Str(Me.PanelIndex)

Canvas.ScaleFactor

ScaleFactor As Double

The scale factor used when converting user space coordinates to backing store coordinates for the Canvas.

This property is read-only.


Canvas.Scope

Scope As Integer

Used to determine whether access to the control is Public (0) or Private (2). The default is Public.

This property is read-only.

If the Scope of a control is set to Private, it cannot be accessed from outside its parent window.


Canvas.TabIndex

TabIndex As Integer

The RectControl's position in the Tab Order. It is 0-based. A TabIndex of 0 is the first RectControl to get the focus.

On the Mac you need Full Keyboard Access turned on in System Preferences (Keyboard->Shortcuts) in order to manually set focus to non-text controls.

This example sets the control's TabIndex.

Me.TabIndex = 2

Canvas.Tooltip

Tooltip As String

Text of help message displayed as a Windows or Linux "tooltip" or macOS help tag.

The tip/tag is displayed when the user hovers the mouse cursor over the control.

This example adds a tooltip to a BevelButton that has an icon.

Me.CaptionAlignment = 0 ' left
Me.CaptionDelta = 10
Me.Tooltip = "Click to bark."

Me.Icon = Woof ' added to the project
Me.CaptionPosition = 2

Canvas.Top

Top As Integer

The top of the control in local coordinates (relative to the window).

This example sets the top of the control to 140 points from the top of the window:

Me.Top = 140

Canvas.TrueWindow

TrueWindow As Window

Returns a reference to the actual enclosing Window.

This property is read-only.

TrueWindow walks up the window hierarchy and finds the actual enclosing window regardless of how deeply nested the RectControl or DesktopContainer hierarchy is.

Window also has a TrueWindow property.

This example accesses the TrueWindow and displays its Title property in a TextField.

TextField1.Text = Me.TrueWindow.Title

Canvas.Visible

Visible As Boolean

Determines whether the control is visible when its owning window is opened. The default is True: the control is visible.

The following code in the DisclosureTriangle Action event handler displays or hides a ListBox on the window:

ListBox1.Value = Me.Visible

Canvas.Width

Width As Integer

The width (in points) of the control.

The following example resizes the control:

Me.Width = 200

Canvas.Window

Window As Window

The control's parent window.

This property is read-only.

This code gets the parent window's Title property.

TextField1.Text = Me.Window.Title

Method descriptions


Canvas.AcceptFileDrop

AcceptFileDrop(FileType As String)

Permits documents of type FileType to be dropped on the control. FileType must be a file type that you defined in via the FileType class or the File Type Sets Editor.

This code in the Open event of an ImageWell makes it possible for the user to drop either a picture or a file that is a jpeg image. The File Type Sets editor was used to define the “image/jpeg” file type. It is one of the “Common File Types” that is available in the editor.

Me.AcceptPictureDrop
Me.AcceptFileDrop("image/jpeg")

To restrict file drops to just folders (and not files), you can put this code in the DragEnter event:

If Not obj.FolderItem.IsFolder Then Return True

Canvas.AcceptPictureDrop

AcceptPictureDrop

Permits pictures to be dropped on the control.

If a control should accept pictures in a drag and drop, then AcceptPictureDrop needs to be called prior to the drop. Typically, it is in the Open event of the control itself. For example, the line:

Me.AcceptPictureDrop

in the Open event of the control that will receive the dragged pictures is needed. When the picture is dropped, the DropObject event is called and this is where you will put your code to handle the drop.

Canvas.Open:

Me.AcceptPictureDrop

Canvas.DropObject:

If obj.PictureAvailable Then
  Me.Backdrop = obj.Picture
End If

Canvas.AcceptRawDataDrop

AcceptRawDataDrop(Type As String)

Permits data (of the Type specified) to be dropped on the control.

The following specfies a generic file type defined in the File Type Sets editor.

Me.AcceptRawDataDrop("????")

Canvas.AcceptTextDrop

AcceptTextDrop

Permits text to be dropped on the control.

This line in the Open event of a control that can accept dragged text.

Me.AcceptTextDrop

Canvas.Close

Close

Closes a control.

Closing a control permanently removes the control from memory, making it impossible to access. You can close both non-indexed controls and indexed controls. When you close an indexed control, the indexes for the remaining controls will shift downward so that the indexes start with zero and are consecutive.

The following code closes the control. When this is executed from a visible control, the control disappears from the window.

Me.Close

Canvas.DrawInto

DrawInto(g As Graphics, x As Integer, y As Integer)

Draws the contents of the RectControl into the specified Graphics context. The parameters x and y are the coordinates of the top, left corner.

This method does not work with HTMLViewer and OpenGLSurface.

This example draws the current control into the Graphics of a Picture and then displays it as the Backdrop of a Canvas:

Var p As New Picture(Me.Width, Me.Height)
Me.DrawInto(p.Graphics, 0, 0)
Canvas1.Backdrop = p

Canvas.Invalidate

Invalidate([EraseBackground As Boolean])

Similar to RefreshRect, but causes the specified region of the RectControl to be marked dirty and to be redrawn when the window contents need to be redrawn. The region to be redrawn is specified by the X, Y, Width, and Height parameters. This form of Invalidate was formerly called InvalidateRect.

The following code refreshes the control. EraseBackground defaults to True.

Me.Invalidate(False)

Canvas.Refresh

Refresh(eraseBackground As Boolean)

Repaints the portion specified of the contents of the control immediately.

Calling this frequently can cause the code executing to slow down. It is often preferable to call RectControl.Invalidate instead.

Refresh the entire area:

Me.Refresh(False)

Refresh a portion of the area:

Me.Refresh(100, 150, 200, 300)

Canvas.Scroll

Scroll(DeltaX As Integer, DeltaY As Integer)

Scrolls the Canvas contents according to the passed parameters.

DeltaX and DeltaY are the number of points to scroll horizontally and vertically relative to the current position of the picture in the Canvas control. Positive values scroll right and down while negative values scroll left and up. The Left, Top, Width, and Height parameters specify the portion of the picture to be scrolled. If these are not passed, the entire picture will be scrolled. ScrollControls indicates whether controls positioned on top of the Canvas control should be scrolled as well. ScrollControls is True by default.

To use the Scroll method to scroll the contents of a Canvas control, you need to store the last scroll value for the axis you are scrolling so you can use this to calculate the amount to scroll. This can be done by adding properties to the window that contains the Canvas control or by creating a new class based on the Canvas control that contains properties to hold the last X scroll amount and last Y scroll amount.

If the ScrollControls parameter is True, any controls on top of the Canvas control will also be scrolled. This allows the implementation of a scrolling pane of controls.

The following example scrolls a picture that was added to the project. The properties XScroll and YScroll have been added to the window to hold the amounts the picture has been scrolled. The picture is scrolled 8 points at a time. In the Keydown event of the window, the following code calls the Scroll method whenever the Up, Down, Left, or Right arrow keys are pressed.

Const LeftArrow = 28
Const RightArrow = 29
Const UpArrow = 30
Const DownArrow = 31
Const ScrollUnit = 8 ' points

Select Case Key.Asc
Case LeftArrow
  XScroll = XScroll + ScrollUnit
  Canvas1.Scroll(ScrollUnit, 0)

Case RightArrow
  XScroll = XScroll - ScrollUnit
  Canvas1.Scroll(-ScrollUnit, 0)

Case UpArrow
  YScroll = YScroll + ScrollUnit
  Canvas1.Scroll(0, ScrollUnit)

Case DownArrow
  YScroll = YScroll - ScrollUnit
  Canvas1.Scroll(0, -ScrollUnit)

End Select

The Scroll method calls the Paint event of the Canvas that redraws the picture with the new values of XScroll and YScroll. The Paint event has the following line of code:

g.DrawPicture(myPicture, XScroll, YScroll)

Canvas.SetFocus

SetFocus

If applicable, sets the focus to the RectControl. KeyDown events are directed to the control.

If the control cannot get the focus on the platform on which the application is running, SetFocus does nothing. The SetFocus method of the Window class or the ClearFocus method can be used to remove the focus from the control that currently has the focus, leaving no control with the focus.

On the Mac you need Full Keyboard Access turned on in System Preferences (Keyboard->Shortcuts) in order to manually set focus to non-text controls.

The following example sets the focus to TextField1. If another control has the focus when this line is executed, then the user sees that TextField1 gets the focus.

TextField1.SetFocus

Event descriptions


Canvas.Activate

Activate

The control is activated. In a single window interface, the Activate event fires when the parent window is activated. See the DesktopApplication and Window Activate events.

This can be because the app is launched or a window belonging to another app is no longer frontmost (active). The Deactivate event fires when another window becomes active. In a single window interface, the Activate event fires when the window is activated, e.g., when the app first displays the window.


Canvas.Close

Close

The control is about to close.


Canvas.ConstructContextualMenu

ConstructContextualMenu(Base As MenuItem, x As Integer, y As Integer) As Boolean

This event is called when it is appropriate to display a contextual menu for the control.

This event handler is the recommended way to handle contextual menus because this event figures out whether the user has requested the contextual menu, regardless of how they did it. Depending on platform, it might be in the MouseUp or MouseDown event and it might be a right+click or by pressing the contextual menu key on the keyboard, for example.

Base is analogous to the menu bar for the contextual menu. Any items you add to Base will be shown as menu items. If you return False, the event is passed up the parent hierarchy.

If you return True, the contextual menu is displayed. The parameters x and y are the mouse locations. If the event was fired because of a non-mouse event, then x and y are both set to -1. See the example of a contextual menu in the following section.

The following ConstructContextualMenu event handler builds a menu with three menu items plus a submenu with three additional menu items.

' Add some items
base.AddMenu(New MenuItem("Test 1"))
base.AddMenu(New MenuItem("Test 2"))
base.AddMenu(New MenuItem("Test 3"))

' Add a Separator
base.AddMenu(New MenuItem(MenuItem.TextSeparator))

' Add a sub menu
Var submenu As New MenuItem("SubMenu")
submenu.AddMenu(New MenuItem("SubMenu Test 1"))
submenu.AddMenu(New MenuItem("SubMenu Test 2"))
submenu.AddMenu(New MenuItem("SubMenu Test 3"))
base.AddMenu(submenu)

' Add a Separator
base.AddMenu(New MenuItem(MenuItem.TextSeparator))

Return True

Canvas.ContextualMenuAction

ContextualMenuAction(HitItem As MenuItem) As Boolean

Fires when a contextual menuitem hitItem was selected but the Action event and the MenuHandler for the menuitem did not handle the menu selection.

This event gives you a chance to handle the menu selection by inspecting the menuitem's Text or Tag properties to see which item was selected. Use this in conjunction with ConstructContextualMenu if you have not specified the Action event or the Menu Handler for the items on the contextual menu. See the example of a contextual menu in the examples for the RectControl class.

Return True if this event has handled the item the user chose from the contextual menu. Returning False will cause the control's parent to execute its ContextualMenuAction event. This can be handy if you have the same contextual menu for several controls who share the same Parent (several on the same window for example). By returning False you can handle them all in a single event.

This simple event handler displays the value of the selected menu item.

If hitItem <> Nil Then MessageBox(hitItem.Value)
Return True

Canvas.Deactivate

Deactivate

The Canvas is deactivated. See the DesktopApplication and Window Deactivate events.

In a multiple window interface, the Deactivate event fires when the parent window is deactivated because another window has been brought to the front or a window belonging to another app becomes frontmost. In a single window app, the Deactivate event fires when a window belonging to another app becomes frontmost.


Canvas.DoubleClick

DoubleClick(X As Integer, Y As Integer)

The user has double-clicked at the passed cordinates (in pixels). The coordinates are relative to the top-left (0,0) point of the Canvas.This event fires even if you return True from the MouseDown event.


Canvas.DragEnter

DragEnter(obj As DragItem, Action As Integer) As Boolean

Fires when the passed DragItem enters the RectControl.

Returns a Boolean. Return True from this event to prevent the drop from occurring.

The Action parameter specifies the drag action. It can take the following class constants of the DragItem class:

Value

Class Constant

0

DragItem.DragActionDefault

1

DragItem.DragActionCopy

2

DragItem.DragActionMove

3

DragItem.DragActionLink

To restrict file drops to just folders (and not files), you can put this code in the DragEnter event:

If Not obj.FolderItem.IsFolder Then Return True

Canvas.DragExit

DragExit(obj As DragItem, Action As Integer)

Fires when the passed DragItem exits the RectControl.

The Obj parameter is the item being dragged. The Action parameter specifies the drag action. It can take the following class constants of the DragItem class:

Value

Constant

0

DragItem.DragActionDefault

1

DragItem.DragActionCopy

2

DragItem.DragActionMove

3

DragItem.DragActionLink


Canvas.DragOver

DragOver(x As Integer, y As Integer, obj As DragItem, Action As Integer) As Boolean

Fires when the DragItem is over the RectControl.

The Obj parameter is the object being dragged. The coordinates x and y are relative to the RectControl. Returns a Boolean. Return True from this event to prevent the drop from occurring.

The Action parameter specifies the drag action, which is typically done by holding down a modifier key (Shift, Alt, Option, Command, etc.) while doing the drag. It can take the following class constants of the DragItem class:

Value

Constant

0

DragItem.DragActionDefault

1

DragItem.DragActionCopy

2

DragItem.DragActionMove

3

DragItem.DragActionLink


Canvas.DropObject

DropObject(Obj As DragItem Action As Integer)

The item represented by Obj has been dropped on the control.

The Obj parameter is the object being dragged. The Action parameter specifies the drag action. It can take the following class constants of the DragItem class:

Value

Constant

0

DragItem.DragActionDefault

1

DragItem.DragActionCopy

2

DragItem.DragActionMove

3

DragItem.DragActionLink

The following DropObject event handler can handle either a dropped picture or a dropped file. The type of file that it can handle needs to have been specified in a call to AcceptFileDrop prior to the drop, for example, in the Open event.

If Obj.PictureAvailable Then
  Me.Image = obj.Picture
ElseIf Obj.FolderItemAvailable Then
  Me.Image = Picture.Open(obj.FolderItem)
End If

Canvas.EnableMenuItems

EnableMenuItems

The Canvas control has received the focus. Menu handlers are invoked if the Canvas control has the focus.

This event is only for use with menu items where you have set the MenuItem.AutoEnabled property to false. Otherwise, menu items are automatically enabled and disabled.


Canvas.GotFocus

GotFocus

The Canvas has received the focus and has a selection rectangle around it.

The AcceptFocus property must be set to True for the Canvas to be capable of getting the focus.

Note

On macOS, controls other than text fields and lists will accept focus only if the full keyboard access option is enabled in System Preferences/Keyboard.


Canvas.KeyDown

KeyDown(Key As String) As Boolean

The user has pressed the Key passed while the control has the focus.

How KeyDown works depends on the type of control.

TextField and TextArea Returning True means the key is intercepted, preventing the key from actually reaching the control at all. This would be useful if you want to override the behavior of the tab key for example. Returning False means the key reaches the control.

All Other Controls Returning True prevents the KeyDown event on the parent control (usually the window) from executing. Returning False results in the execution of the KeyDown event of the parent control.


Canvas.KeyUp

KeyUp(Key As String)

Fires when the passed Key is released in the RectControl that has the focus.

It is not guaranteed to be the same key that received the KeyDown event.


Canvas.LostFocus

LostFocus

The Canvas has lost the focus.

The AcceptFocus property must be set to True for the Canvas to be capable of getting then losing the focus.

Note

On macOS, controls other than text fields and lists will accept and lose focus only if the full keyboard access option is enabled in System Preferences/Keyboard.


Canvas.MouseDown

MouseDown(x As Integer, y As Integer) As Boolean

The mouse button was pressed inside the control's region at the location passed in to x, y.

The coordinates x and y are local to the control, i.e. they represent the position of the mouse click relative to the upper-left corner or the Canvas.

Return True if you are going to handle the MouseDown. In such a case:

  • The Action event, if any, will not execute and the state of the object will not change.

  • You will receive the MouseDrag and MouseUp events.

If you return False, the system handles the MouseDown so the MouseDrag and MouseUp event handlers do not get called.

The MouseDown event uses the DragItem constructor when the user drags the contents of the control. It is:

Var d As DragItem
d = New DragItem(Self, Me.Left, Me.Top, Me.Width, Me.Height)
d.Picture = Me.Image
d.Drag ' Allow the drag

Canvas.MouseDrag

MouseDrag(x As Integer, y As Integer)

This event fires continuously after the mouse button was pressed inside the Canvas. Mouse location is local to the control passed in to x, y.

Note

This event will not occur unless you return True in the MouseDown event first.

The parameters x and y are local coordinates, i.e. they represent the position of the mouse relative to the upper-left corner of the Canvas.

As this event is fired continuously (hundreds of time per second), it is your responsibility to determine if the mouse has really moved.


Canvas.MouseEnter

MouseEnter

The mouse has entered the area of the control.


Canvas.MouseExit

MouseExit

The mouse has left the area of the control.


Canvas.MouseMove

MouseMove(X As Integer, Y As Integer)

The mouse has moved within the control to the coordinates passed. The coordinates are local to the control, not to the window.


Canvas.MouseUp

MouseUp(x As Integer, y As Integer)

The mouse button was released. Use the x and y parameters to determine if the mouse button was released within the control's boundaries.

Note

This event will not occur unless you return True in the MouseDown event. The return value is ignored.

The parameters x and y are local coordinates, i.e. they represent the position of the mouse click relative to the upper-left corner or the Canvas. Mouse clicks that are released to the left or above a control are negative.


Canvas.MouseWheel

MouseWheel(X As Integer, Y As Integer, DeltaX As Integer, DeltaY As Integer) As Boolean

The mouse wheel has been moved.

The parameters X and Y are the mouse coordinates relative to the control that has received the event. The parameters DeltaX and DeltaY hold the number of scroll lines the wheel has been moved horizontally and vertically, as defined by the operating system. DeltaX is positive when the user scrolls right and negative when scrolling to the left. DeltaY is positive when the user scrolls down and negative when scrolling up.

Returns a Boolean. Return True to prevent the event from propagating further.


Canvas.Open

Open

The control is about to be displayed. Use this event to initialize a control.

The Open event is called after the Constructor.

Be warned that initializing control property values using the Constructor instead of the Open event may result in those property values being overwritten by what is set in the Inspector. For best results, use the Open event for control initialization rather than the control Constructor.

If the control is supposed to handle drag and drop, you need to tell it which type of item it needs to be able to handle. The following example informs the control that pictures and files can be dropped on it. The type of the file it needs to support is specified via the File Types Editor.

Sub Open()
  Me.AcceptPictureDrop
  Me.AcceptFileDrop("JPEG")
End Sub

Canvas.Paint

Paint(g As Graphics, areas() As Rect)

The area needs to be redrawn, such as when it has been covered by another window and then uncovered. Use the g parameter for all drawing. The areas parameter contains the areas of the Canvas that need redrawing. If areas is empty then the entire Canvas needs to be redrawn.

This code draws a 3D rectangle with a raised look:

Sub Paint(g As Graphics)
Const White = &cffffff
Const DarkGray = &c8c8c8c
Const LightGray = &cefefef

g.DrawingColor = White
g.DrawLine(1, 1, Me.Width, 1)
g.DrawLine(1, Me.Height - 1, 1, 1)
g.DrawingColor = DarkGray
g.DrawLine(Me.Width - 1, 2, Me.Width - 1, Me.Height)
g.DrawLine(1, Me.Height - 1, Me.Width, Me.Height - 1)

//fill in the light gray rectangle
g.DrawingColor = LightGray
g.FillRectangle(2, 2, Me.Width - 3, Me.Height - 3)

This code uses the Paint event handler of a Canvas control to draw the text "The quick brown fox" in Helvetica bold, italic, 18 point, 50 points from the top of and 10 points from the left side of the control:

Sub Paint(g As Graphics)
g.Bold = True
g.Italic = True
g.FontName = "Helvetica"
g.FontSize = 18
g.DrawText("The quick brown fox", 10, 50)

This code assigns the color of a particular point in a Canvas control to a variable:

Sub Paint(g As Graphics)
Var c As Color
c = g.Pixel(10, 10)

This code sets a particular point of a Canvas control to a specific RGB value:

Sub Paint(g As Graphics)
g.Pixel(10, 10) =Color.RGB(100, 105, 225)

This is code draws a triangle in a Canvas. It is placed in the Paint event. The parameter g as Graphics is passed into this event:

Sub Paint(g As Graphics)
Var points(6) As Integer
points(1) = 10 ' X of Point 1
points(2) = 10 ' Y of Point 1
points(3) = 75 ' X of Point 2
points(4) = 30 ' Y of Point 2
points(5) = 10 ' X of Point 3
points(6) = 125 ' Y of Point 3
g.DrawingColor =Color.RGB(100, 200, 255)

This code uses the Clip method to define child Graphics items within the parent Canvas. The code is in the Paint event of a Canvas. The two clippings define regions at the top of the Canvas and the DrawOval method draws object in each one. Notice that the first call tries to draw an oval that is wider than the region. It is truncated in the drawing.

Sub Paint(g As Graphics)
Var myClip As Graphics = g.Clip(0, 0, 150, 15)
Var myClip2 As Graphics = g.Clip(150, 0, 150, 15)

' draw the border of the Canvas..
g.DrawingColor = &c000000
g.DrawRectangle(0, 0, g.Width, g.Height)

' draw into the first area...
myClip.DrawingColor = &cff0000
myClip.DrawRectangle(0, 0, myClip.Width, myClip.Height) ' draw the border of the area..
myClip.DrawOval(0, 0, 200, 15) ' the oval does not appear outside the region despite the call

' draw into the second area...
myClip2.DrawingColor = &c0000ff
myClip2.DrawRectangle(0, 0, myClip2.Width, myClip2.Height) ' draw the border of the area
myClip2.DrawOval(0, 0, 150, 15)

This simple Canvas control changes from black to white when you click on it.

Drag a Canvas control into a window. Add a Boolean property (mBlack) to the Window. This is used toggle the color of the Canvas when it is clicked.

The code for the Canvas MouseDown event handler looks like this:

Function MouseDown(X As Integer, Y As Integer) As Boolean
  mBlack = Not mBlack ' Toggle the color

  Me.Invalidate(False) ' Tell the Canvas to draw itself
End Function

This code toggles the mBlack value when the Canvas is clicked and then tells the Canvas to redraw itself. In the Paint event handler, you draw the rectangle setting the color based on the value of mBlack:

Sub Paint(g As Graphics)
  If mBlack Then
    g.DrawingColor = &c000000
  Else
    g.DrawingColor = &cffffff
  End If

  g.FillRectangle(0, 0, g.Width, g.Height)
End Sub

Add the following functions to a class or module:

Function IsWithinRect(left As Integer, top As Integer, width As Integer, height As Integer, rectangle As Rect) As Boolean
  left = Max (left, rectangle.Left)
  top = Max (top, rectangle.Top)
  Var right As Integer = Min(left + width, rectangle.Left + rectangle.Width)
  Var bottom As Integer = Min(top + height, rectangle.Top + rectangle.Height)

  Return (left < right) And (top < bottom)
End Function

Function IsWithinRects(left As Integer, top As Integer, width As Integer, height As Integer, rects() As Rect) As Boolean
  For Each r As Rect In rects
    If IsWithinRect(left, top, width, height, r) Then
      Return True
    End If
  Next
End Function

With that, you can test if an object you want to draw within a particular position needs drawing at all, possibly speeding up the drawing process:

Sub Paint(g As Graphics, areas() As Rect)
  ' Draw an image at position 100 / 100, but only if needed
  If areas.Ubound < 0 Or IsWithinRects(100, 100, theImage.Width, theImage.Height, areas) Then
    g.DrawPicture(theImage, 100, 100)
  End If

Canvas.ScaleFactorChanged

ScaleFactorChanged

The backing store scale factor has changed and the Canvas should invalidate any cached bitmaps or other relevant state.

If you have an Image Set with multiple images for HiDPI and want to split out each of the pictures it contains, you can do so like this:

Var g As Graphics
Var p, pics() As Picture

' Break the Image into its component pictures
' Also copy the horizontal/vertical resolution and scale factors
' so that the pictures draw properly when used later.
For i As Integer = 0 To MyImageSet.ImageCount - 1
  p = New Picture(MyImageSet.IndexedImage(i).Width, MyImageSet.IndexedImage(i).Height)
  p.HorizontalResolution = MyImageSet.IndexedImage(i).HorizontalResolution
  p.VerticalResolution = MyImageSet.IndexedImage(i).VerticalResolution
  pics.Add(p)
  g = p.Graphics
  g.ScaleX = p.HorizontalResolution / 72
  g.ScaleY = p.VerticalResolution / 72
  g.DrawPicture(MyImageSet.IndexedImage(i), 0, 0)
Next

If you later modify the pictures in the array and want to recreate it as an image, you can do so using the constructor like this:

' Recreate the image from the component pictures
p = New Picture(MyImageSet.Width, MyImageSet.Height, pics)

Notes

Coordinates passed to Canvas events are local to the Canvas object.

To use the Scroll method to scroll the picture in a Canvas control, you need to store the last scroll value for the axis you are scrolling so you can use this to calculate the amount to scroll. This can be done by adding properties to the window that contains the Canvas control or by creating a new class based on the Canvas control that contains properties to hold the last X scroll amount and last Y scroll amount.

If the ScrollControls parameter is True, any controls on top of the Canvas control will also be scrolled. This allows the implementation of a scrolling pane of controls.

The following example scrolls a picture that was added to the project. The properties XScroll and YScroll have been added to the window to hold the amounts the picture has been scrolled. The picture is scrolled 8 points at a time. In the Keydown event of the window, the following code calls the Scroll method whenever the Up, Down, Left, or Right arrow keys are pressed.

Const LeftArrow = 28
Const RightArrow = 29
Const UpArrow = 30
Const DownArrow = 31
Const ScrollUnit = 8 ' points

Select Case Key.Asc
Case LeftArrow
  XScroll = XScroll + ScrollUnit
  Canvas1.Scroll ScrollUnit, 0

Case RightArrow
  XScroll = XScroll - ScrollUnit
  Canvas1.Scroll -ScrollUnit, 0

Case UpArrow
  YScroll = YScroll + ScrollUnit
  Canvas1.Scroll 0, ScrollUnit

Case DownArrow
  YScroll = YScroll - ScrollUnit
  Canvas1.Scroll 0, -ScrollUnit

End Select

The Scroll method calls the Paint event of the Canvas that redraws the picture with the new values of XScroll and YScroll. The Paint event has the following line of code:

g.DrawPicture(myPicture, Xscroll, Yscroll)

Sample code

This code in the Paint event handler draws a simple red line:

g.DrawingColor = &cff0000
g.DrawLine(0, 10, 100, 100)

To draw a picture in a Canvas, use this code in the Paint event:

g.DrawPicture(PictureAddedToProject, 0, 0)

This code (in the Paint event) draws a 3D rectangle with a raised look.

Const White = &cffffff
Const DarkGray = &c8c8c8c
Const LightGray = &cefefef

g.ForeColor = White
g.DrawLine(1, 1, Me.Width, 1)
g.DrawLine(1, Me.Height - 1, 1, 1)
g.DrawingColor = DarkGray
g.DrawLine(Me.Width - 1, 2, Me.Width - 1, Me.Height)
g.DrawLine(1, Me.Height - 1, Me.Width, Me.Height - 1)

//fill in the light gray rectangle
g.DrawingColor = LightGray
g.DrawFilledRectangle(2, 2, Me.Width - 3, Me.Height - 3)

This code draws a gradient from Red to Blue:

Var startColor As Color = &cff0000
Var endColor As Color = &c0000ff

Var p As New Picture(g.Width, g.Height)

Var samt, eamt As Double

For i As Integer = 0 To p.Height
  samt = 1 - (i / p.Height)
  eamt = i / p.Height
  p.Graphics.DrawingColor =Color.RGB((startColor.Red * samt) + (endColor.Red * eamt), _
  (startColor.Green *samt) + (endColor.Green * eamt), _
  (startColor.Blue * samt) + (endColor.Blue * eamt))
  p.Graphics.DrawLine(-1, i, p.Width + 1, i)
Next

g.DrawPicture(p, 0, 0)

This code assigns a picture that has been added to the Project Editor to the Backdrop property in the Open event:

Me.Backdrop = OSLogo

You can use the methods of the Graphics class to modify the picture in any way you like. For example, the following code in the object's Paint event handler adds a caption to the picture:

g.FontName = "Arial"
g.FontSize = 14
g.DrawingColor = &c0080C0
g.DrawText("Mary Jane", 10, 100)

If you instead assigned the graphic to the BackDrop property using the Picture constructor, as shown below, you could manipulate the graphic at the pixel level using the RGBSurface property of the Picture object.

Me.Backdrop = New Picture(210, 30)
Me.Backdrop.Graphics.DrawPicture(YourAppLogo, 0, 0)

See also the examples for the Control class, which give an example of dragging from a Canvas control and the ImageWell class example, which show drag and drop to and from the ImageWell.Image property.

Unfortunately, a Focus Ring does not appear on Windows or Linux when a Canvas control gets the focus, but the GotFocus and LostFocus events fire normally. You can easily use them to simulate a focus ring. Create a property on the window called mHasFocus As Boolean.

In the GotFocus event handler:

mHasFocus = True
Canvas1.Invalidate(False)

In the LostFocus event handler:

mHasFocus = False
Canvas1.Invalidate

In the Paint event handler for Canvas1:

#If TargetWindows Or TargetLinux Then
  If mHasFocus Then
    g.DrawingColor = HighlightColor ' or FrameColor, whichever you wish
    g.DrawRectangle(0, 0, Me.Width - 1, Me.Height - 1)
  Else
    g.DrawingColor =Color.RGB(178, 178, 178) ' gray
    g.DrawRectangle(0, 0, Me.Width - 1, Me.Height - 1)
  End If
#Endif

Compatibility

All project types on all supported operating systems.

See also

RectControl parent class; Graphics, Picture classes