Promotic
WikipediaLinkedInYoutubeTwitterFacebook

prepareDrawRect - method of object CanvasCtxExt

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

The goal of this transformation is to make shifts, rotations and flips easier to use.

Syntax:
prepareDrawRect(oMap As Object)
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 relative 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 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.

 
The method can also be called in the graphic item events for Web Panels.
Example:
Allocate the drawing area where the image will be rotated 45° clockwise and flipped vertically
...
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.
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice