Welcome Guest, you are in: <root>Elements • Login

Page History: GDI Canvas Element

Compare Page Revisions

16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0 Current 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

« Older Revision - Back to Page History - Newer Revision »

Page Revision: 2016/05/08 13:12

GDI Canvas element provides a rectangular canvas for drawing using programmable routines of GDI+ library. All GDI+ routines can be directly called in code snippets.

Table of Contents [Hide/Show] Synchronized Internal Actions Properties     Generic properties Description Snapshots Practical Use     Step by Step: Adding a GDI Canvas element Notes

Description ¶

GDI+ is a powerful graphical library for Windows, with thousands functions for drawing graphical primitives and bitmaps, managing colors and geometrical transforms GDI+ tutorial. You can call these functions in your code snippets in order to draw a dynamic 2D graphical content in your experiments.

Snapshots ¶

Example canvas

Example code

Practical Use ¶

Using the element is very easy. By setting its position and size you define a rectangular area on the screen that represents a rendering canvas for drawing functions. Then you address the Graphics property of the element. This property provides you with the base GDI class which, in turn, possesses all available drawing functions. Now you call these functions directly as in the following C# line:

 Graphics.DrawRectangle(new Pen(Color.Red), 20,20,248,162); 

When a snippet with GDI calls is completed the canvas element redraws its rendering canvas which also reappears on the screen if the parent event is active.

Step by Step: Adding a GDI Canvas element ¶

1. On an event, click "Add Element", under the "VISUAL STIMULI" category, select the "GDI canvas" element.
2. Double click on the black square that appears.
3. Create a proxy variable from the "Graphics" property, e.g "Graphics"
4. In the bottom 'Snippets' panel, under 'Preparation', click on the 'Start' Snippet.
5. add the following code:
   
   

    Graphics.DrawRectangle(new Pen(Color.Red), 20,20,248,162); 

   
   

Note: If unsure about proxy variables, please see the Proxy variables concept page.

Notes ¶

• The drawing coordinates in your code have to be inside of the range defined by the size of the GDI Canvas element in pixels, otherwise the drawn content will be cut off.
• The GDI canvas element remembers its rendered state even if the parent event is deactivated and activated again. To clear the drawn graphics use the GDI Clear() function.