prepareDrawRect - method of the CanvasCtxExt object

Description:

Makes transformation that shifts, rotates and flips the defined rectangle.

The goal of this transformation is to simplify drawing in the area so after the transformation shifting, rotating and flipping is executed by the transformation.

Syntax:

Empty prepareDrawRect(Object oMap)

Calling:

pEvent.CtxExt.prepareDrawRect(oMap);

Parameters:

oMap	(Object) Object of the PmMap type that contains the following properties specify the transformation process: x (mandatory) - X position of upper left corner of the rectangle (in pixels) y (mandatory) - Y position of upper left corner of the rectangle (in pixels) dx (mandatory) - Rectangle width (in pixels) dy (mandatory) - Rectangle height (in pixels) rotateAngle (optional) - Image rotation angle in degrees (rotation centre is in the middle of the defined rectangle). Examples: 0 (default) - no rotation 90 - rotate by angle 90° 45 - rotate by angle 45° -45 = 270 - rotate by angle 270° 10.125 - rotate by angle 10.125° flip (optional) - Flip drawing. 0 (default) - no flip 1 - flip to vertical axis

oMap

(Object) Object of the PmMap type that contains the following properties specify the transformation process:

x (mandatory) - X position of upper left corner of the rectangle (in pixels)

y (mandatory) - Y position of upper left corner of the rectangle (in pixels)

dx (mandatory) - Rectangle width (in pixels)

dy (mandatory) - Rectangle height (in pixels)

rotateAngle (optional) - Image rotation angle in degrees (rotation centre is in the middle of the defined rectangle). Examples:

0 (default) - no rotation

90 - rotate by angle 90°

45 - rotate by angle 45°

-45 = 270 - rotate by angle 270°

10.125 - rotate by angle 10.125°

flip (optional) - Flip drawing.

0 (default) - no flip

1 - flip to vertical axis

Note:

Calling this method defines a rectangle of the drawing area in the oMap object, using the properties x, y, dx, dy. Then it is possible to define the desired action in the oMap object: rotateAngle and flip. The method executes the transformation of coordinates in order to move the left upper corner to (0,0) and then the rotation and flipping. Then the transformation adds the properties drawDx and drawDy into the oMap object. If you then draw into the rectangle with upper left corner located at (0,0) and with dimesions oMap.drawDx and oMap.drawDy, then you do not have to pay attention to shifting, rotating and flipping.

Rotation in square is quite simple (the rotate transformation can be used for example), but rotation in rectangle is done in this method so if the rotation angle is 90° then the image is deformed (longer or shorter).

This method is just a special case of the transform method. In case the designer wanted to make this transformation by the transform method, it would be very difficult - the computations related to deformation rotation are quite mathematicaly complex.

This method is also functional in Web panels.

Example:

Allocate the drawing area where the image will be rotated 45° clockwise and flipped vertically

The ctx variable represents the drawing canvas (CanvasCtx). The setup is done on the "Draw" tab at the beginning of the script of drawing event onDraw as follows:

var ctx = pEvent.GetCtx(1);

JavaScriptSelect and copy to clipboard


var ctx = pEvent.GetCtx(0);
//...
var oMap = Pm.CreatePmMap();
oMap.x = 10;
oMap.y = 10;
oMap.dx = 90;
oMap.dy = 90;
oMap.rotateAngle = 45;
oMap.flip = 1;
pEvent.CtxExt.prepareDrawRect(oMap);
//detect new coordinates of the area dx and dy after transformation
var dx = oMap.drawDx;
var dy = oMap.drawDy;
//...anything that will be drawn in the area 0 - dx and 0 - dy, will be shifted, flipped and rotated in the resulting drawing.