Egret realizes the display object zooming in and out (Scale change) and the corresponding change of anchor offset

In actual projects, we often use two fingers to enlarge and shrink a visible display object. Plane 2D involves changing the scaleX and scaleY attributes of the display object.

When a display object is no longer stretched, the default Scale of the display object is 1, and the X and Y of the anchor offset coordinates are both 0.


Although the display object has not been displaced and the coordinates have not been changed, due to the change of the anchor offset coordinates, at this time, the anchor offset coordinates X and Y are both 100, resulting in visual changes at the same time. At this time, what we need to do is to adjust the coordinates of the display object to make it return to the visual effect we think is appropriate.

Back to the topic, two fingers zoom in and out of a visible display object. In fact, the anchor offset coordinate changes and the scale changes. This situation is a little more complicated. We need to integrate the zoom scale into the algorithm at the same time. The complete example code is as follows.

class DragPanel extends eui.UILayer {
	public constructor() {
		super();
		this.once(egret.Event.ADDED_TO_STAGE, this.AddToStage,this)
	}

	private sc:number = 1;
	private AddToStage(evt:egret.Event):void
	{	
		this.scaleX = this.scaleY = this.sc;

		let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes("bg_jpg");
        result.texture = texture;
		let sky = result;
        this.addChild(sky);

		console.log("Scale******" + this.sc);
		console.log("anchorOffsetX******" + this.anchorOffsetX + "," + "anchorOffsetY******" + this.anchorOffsetY);

		this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.mouseDown, this);
		this.stage.addEventListener(egret.TouchEvent.TOUCH_END, this.mouseUp, this);
		this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);
	}

	private shape:egret.Shape;
	private mouseDown(evt:egret.TouchEvent)
    {
		if(this.shape && this.shape.parent)
		{
			this.shape.graphics.clear();
			this.shape.parent.removeChild(this.shape);
			this.shape = null;
		}

		let offsetX = this.anchorOffsetX*this.sc - this.x;
		let offsetY = this.anchorOffsetY*this.sc - this.y;

		this.anchorOffsetX = (evt.stageX + offsetX)/ this.sc;
		this.anchorOffsetY = (evt.stageY + offsetY)/ this.sc;

		this.shape  = new egret.Shape();
        this.shape.graphics.beginFill(0xff0000);
        this.shape.graphics.drawRect(this.anchorOffsetX, this.anchorOffsetY, 10, 10);
        this.shape.graphics.endFill();
        this.addChild(this.shape); 

		this.x = this.anchorOffsetX*this.sc - offsetX;
		this.y = this.anchorOffsetY*this.sc - offsetY;
	}

	private mouseMove(evt:egret.TouchEvent)
    {

	}

	private mouseUp(evt:egret.TouchEvent)
    {

	}


}

The private variable sc can set any value of 0-1 to change the Scale simulation stretch.

Posted on Sat, 06 Jun 2020 22:07:48 -0700 by idris