Draw - tab of the PmgCanvas object

Description:

Algorithm definition (JavaScript) for onDraw drawing event that allows to draw into the CanvasCtx drawing area.

Configurators:

onDraw

This drawing event is triggered if the object graphics needs to be redrawn.

Parameters:

pEvent	(Object) Reference to an object describing detailed information about the specific event.
pEvent.GetCtx(state)	(Object) Returns the CanvasCtx object, that represents the drawing area. The meaning of the state parameter: 0 - An empty drawing area is obtained, any existing content is discarded. All visible content is drawn again from the start. 1 - The drawing area in current state is obtained, so the existing content is preserved. This way, the new drawings can be added, for example the variable progression where the new points are added. The pEvent.CtxExt.isReset() method can be used to detect whether the drawing are is non-initialized (empty) or contains drawings from previous sessions.
pEvent.GetVar(sName)	(Object) Returns the variable of the Pmg object on the "Variables" tab with defined sName. See PmgObject.Vars.
pEvent.GetParentVar(sName)	(Object) Returns the variable of the parent Pmg object on the "Variables" tab with defined sName. The "In onDraw pEvent.GetParentVar(sName) method will be used" configurator must be enabled, in order to access the parent object variables. See PmgObject.Vars.
pEvent.CtxDx	(Long) The width of drawing area (in pixels). The drawing area has the same size as the PmgCanvas object.
pEvent.CtxDy	(Long) The height of the drawing area (in pixels).
pEvent.CtxExt	(Object) The reference to the CanvasCtxExt object.
pEvent.Methods	(Object) Designer methods for drawing.
pEvent.ViewerType	(Long) Flag where the the CanvasCtx object is drawn: 0 - Development mode 1 - Runtime mode (local) 2 - Runtime mode (Web browser)

Auxiliary methods

Because some drawings can be very complex it may be handy to divide the whole drawing into auxiliary user drawing methods that can be created on the same level as the onDraw event.
Auxiliary drawing methods have the same parameters as the onDraw event and can also have its own extra parameters. It is recommended that the methods have at least one extra ctx parameter, so it does not to be obtained individually - see the example:

One method draws the scale (named for example DrawScale) and another method draws the value curve (named for example DrawCurve). In the onDraw event, there is only a simple script that calls these methods.

JavaScriptSelect and copy to clipboard



var ctx = pEvent.GetCtx(0);

pEvent.Methods.DrawScale(ctx);

pEvent.Methods.DrawCurve(ctx);

Note:

The drawing algorithms are always written here in the JavaScript language, independently on the setting of the "Scripting language settings" configurator in the PmaPanel object.

The PmgCanvas object ensures automated triggering of the onDraw event for redrawing the draw area CanvasCtx if needed:

1) If the drawing area is not initialized (empty) after opening the panel or after change the size of the PmgCanvas object, or after calling the CtxReset method. In this case the drawing area is always empty (transparent).

2) If the input variables (Variables) of the PmgCanvas object were changed. The drawing method may request either an existing drawing area, see pEvent.GetCtx(1), or more commonly non-initialized (empty) drawing area, see pEvent.GetCtx(0).

3) If the variables (Variables) of the parent Pmg object (background) PmgCanvas were changed (valid for embedded object - foreground).

The drawing area is redrawn in the onDraw event only if changed. If no change occurs, then it is not necessary to use the script for redrawing the area and the remembered appearance is used. The onDraw event can access only the values of local variables (Variables) of the PmgCanvas object, that are currently used as data interface of the drawing function. It can also use the Pm object and the drawing area object CanvasCtx. The scripting interface of the CanvasCtx object enables most of the methods and properties for 2D drawing used in HTML5 in the <canvas> tag.