白鹭引擎(egret)中锚点(anchoroffset)的位置体会

原文链接
首先关于锚点的作用，我们就以一根线段旋转90度为例：
先绘制一根水平的直线，长度为100

protected startCreateScene(): void {        this.drawOneLine();    }protected drawOneLine(){    let ns = new egret.Shape();    ns.x = 100;    ns.y = 100;    ns.graphics.lineStyle(2,0xFF0000);    ns.graphics.moveTo(0,0);    ns.graphics.lineTo(100,0);    this.addChild(ns);}

现在我们修改下代码，在默认锚点的情况下，旋转90度。为了方便观察，我给线段做了渐变处理，越靠近90度的线段颜色越浅：

protected startCreateScene(): void {    this.drawLine(0);}protected drawLine(angle): void {    let ns = new egret.Shape();    ns.x = 100;    ns.y = 100;    ns.graphics.lineStyle(2,0xFF0000);    ns.graphics.moveTo(0,0);    ns.graphics.lineTo(100,0);    ns.alpha = 1-(angle/90)*0.9;    ns.rotation = angle;    this.addChild(ns);    if(angle < 90){        this.drawLine(angle+15);    }}

现在我们设置锚点，将中心点居中

protected startCreateScene(): void {    this.drawLine(0);    this.drawLineCenter(0);}protected drawLineCenter(angle): void {    let ns = new egret.Shape();    ns.x = 100;    ns.y = 300;    ns.anchorOffsetX = 50; // 设置锚点横坐标，位于线段中心    ns.graphics.lineStyle(2,0x000000);    ns.graphics.moveTo(0,0);    ns.graphics.lineTo(100,0);    ns.alpha = 1-(angle/90)*0.9;    ns.rotation = angle;    this.addChild(ns);    if(angle < 90){        this.drawLineCenter(angle+15);    }}

关于锚点是如何影响元素旋转的这个示例已经很清楚了。
接下来说这篇文正的关键，上图中有一个不太正常的地方，即黑色线段往左偏移，这个对于刚接触锚点概念的同学来说，无疑是非常残忍的，说白了就是个坑。明明所有元素都放在其应该出现的位置上，并且实现了动效，所有的属性设置也都正确，怎么元素就偏了呢？
现在，我们仍然以长度100的水平线段为例，将锚点依次设置为0，50，100，观察这三根线段的情况，代码如下：

protected startCreateScene(): void {    this.drawLineAnchor(100,100,0);    this.drawLineAnchor(100,150,50);    this.drawLineAnchor(100,200,100);}protected drawLineAnchor(x,y,anchorX):void{    let ns = new egret.Shape();    ns.x = x;    ns.y = y;    ns.anchorOffsetX = anchorX;    ns.graphics.lineStyle(2,0x000000);    ns.graphics.moveTo(0,0);    ns.graphics.lineTo(100,0);    this.addChild(ns);}

从上图中可以很明显的看到锚点对于画面中真实绘制出线段的影响，即元素a在画面中实际的横坐标为x’ = a.x - a.anchorOffsetX。代码在执行到moveTo那一行时，元素根据属性被定位到x=100,y=100后，由于其左上角的锚点被设置为anchorOffsetX=50,anchorOffsetY=0的关系，因此会按照锚点的设置位置向左偏移50再开始绘制初始点。

所以，如果我们必须改变moveTo的初始点和终点，或者改变元素本身的x坐标，才能达到和原线段相同的位置:

protected startCreateScene(): void {    this.drawLineAnchor(100, 100, 0);     this.drawLineAnchorFixMove(100, 150, 50); // 修改起点终点    this.drawLineAnchorFixX(100, 200, 100); // 修改x坐标}protected drawLineAnchor(){...} // 方法略protected drawLineAnchorFixMove(x, y, anchorX): void {    let ns = new egret.Shape();    ns.x = x;    ns.y = y;    ns.anchorOffsetX = anchorX;    ns.graphics.lineStyle(1, 0x000000);    ns.graphics.moveTo(0 + anchorX, 0); // 修改线段起始点    ns.graphics.lineTo(100 + anchorX, 0); // 修改线段终点    this.addChild(ns);}protected drawLineAnchorFixX(x, y, anchorX): void {    let ns = new egret.Shape();    ns.x = x + anchorX; // 修改整个容器的横坐标    ns.y = y;    ns.anchorOffsetX = anchorX;    ns.graphics.lineStyle(1, 0x000000);    ns.graphics.moveTo(0, 0);    ns.graphics.lineTo(100, 0);    this.addChild(ns);}

现在大家应该能理解设置锚点之后元素的具体位置了。