HTML5 Game Engine (5) - Transform Operation - Anchor Operation - Modify Anchor Point - Local and Stage Coordinates - Slant

Transform operation

Anchor Point Operation

Each display object contains an anchor point, which by default is in the upper left corner of the display object.

When setting the coordinate position of a display object, the drawing position of the display object is changed by referencing the anchor point. At the same time, the position of the anchor point relative to the display object can be changed.

class AnchorTest extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        shp.x = 100;
        shp.y = 100;
        this.addChild( shp );
        // Anchor point offset is opposite to X, Y offset
        shp.anchorOffsetX = 100;  // 100- 100 = 200
        shp.anchorOffsetY = 100;
    }
}

In the code above, a green square is drawn, and the anchor point defaults to the upper left corner of the square, changing the position of the square by setting the x, y properties of shp.

The effect is as follows:

Modify Anchor Point

The location of the modified anchor point can be accessed through the anchorOffsetX and anchorOffsetY attributes.

Modify the position of the anchor point in the above example so that it is 50 pixels on the x-axis in the upper left corner of the square, coded as follows:

shp.anchorOffsetX = 50;

Local and stage coordinates

The x and y attributes always refer to the position of the display object relative to its parent display object's (0,0) coordinates. Therefore, for Shape instances (such as circles) contained within the DisplayObjectContainer instance, if the x and y attributes of the Shape object are set to 0, the circle is placed in the upper left corner of the DisplayObjectContainer, but that location is not necessarily the upper left corner of the stage. To determine the position of the object relative to the global stage coordinates, you can use any globalToLocal() method of displaying the object to convert the coordinates from the global (relative to the stage) coordinates to the local (relative to the display object container) coordinates, as follows:

//Create an empty DisplayObjectContainer and change its x and y coordinates to
var container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
container.x = 200;
container.y = 200;
this.addChild(container);
//Draw a red circle to add to the container
var circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(25,25,25);
circle.graphics.endFill();
container.addChild(circle);
//Add a click event to a circle
circle.touchEnabled = true;
circle.addEventListener(egret.TouchEvent.TOUCH_TAP,onClick,this);
function onClick():void{
    //Converts the coordinates of the upper left corner of the stage (0,0) to those of the interior of the container
    var targetPoint: egret.Point = container.globalToLocal(0,0);
    //Relocate the circle to see it move to the upper left corner of the screen
    circle.x = targetPoint.x;
    circle.y = targetPoint.y;
}

Similarly, you can use the localToGlobal() method of the DisplayObject class to convert local coordinates to stage coordinates.

Bevel

Oblique tangent is a parallel matrix distortion of an image in 2D space.

Oblique cutting can be controlled in two directions. Oblique cutting in the X direction will cause the bottom edge of the rectangle to shift in the X direction accordingly.

As shown in the figure above, the result is achieved by slanting the egret bird in X direction by 10. On the left is the original undeformed picture, and on the right is the deformed picture.

//Set the X-direction bevel of the object
mySprite.skewX = 10;

Similarly, an oblique cut in the Y direction will cause the right side of the rectangle to shift in the Y direction.

As shown in the figure above, the result is achieved by slanting the egret bird in the Y direction by 10.

//Set the Y-direction bevel of the object
mySprite.skewY = 10;