原文連結
首先關於錨點的作用，我們就以一根線段旋轉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);
}

現在大家應該能理解設定錨點之後元素的具體位置了。