Easeljs之regX/regY詳解

regX/regY詳解

在學習使用createjs建立圖形中，必然要接觸到顯示對象各類各樣與位置有關的屬性值，好比，x,y, regX, regY, localX 等，今天咱們詳細的說一下regX/regY, 這兩個屬性在旋轉圖形中尤其重要，它的做用相似於咱們CSS3中transform-origin屬性。文末有例子源碼連接（可能須要引入easeljs庫，能夠去官網找一下CDN連接）

什麼是regX/regY

regX：The left offset for this display object's registration point
   regY：The y offset for this display object's registration point

能夠看到reg就是註冊點，regX就表示在X軸上，註冊點的偏移量。那麼一個新建的顯示對象它的默認註冊點在哪裏？答案是，其註冊點在包含它的容器的左上角.
舉個栗子：

var canvas = document.querySelector('#canvas');               // 獲取畫布
var stage = new createjs.Stage(canvas)           // 將canvas關聯到stage，之後對stage的操做，其實都是對canvas的操做

var graphics = new createjs.Graphics().beginFill('#000').drawRect(0, 0, 50, 50);       //繪製一個50*50矩形，從容器左上角繪製（0， 0 ）
var shape = new createjs.Shape(graphics);     // 建立圖形容器shape
var count = 0;

createjs.Ticker.addEventListener('tick', e => {          // 讓矩形轉起來
    shape.rotation = 5*count++;
  stage.update();
})

createjs.Ticker.timingMode = createjs.Ticker.RAF;       // 使用window.requestAniamtionFrame渲染

stage.addChild(shape);                  // 將繪製容器添加到舞臺
stage.update();                               // 舞臺更新，其實就是canvas刷新

效果以下：

從這副圖咱們能夠看到旋轉時，默認註冊點是在左上角的，由於矩形是參考容器（0，0）位置進行繪製的，因此左上角頂點與註冊點一致，旋轉時依照註冊點，也是這裏的頂點

regX/regY並不能修改註冊點

var graphics = new createjs.Graphics().beginFill('#000').drawRect(0, 0, 50, 50);
var shape = new createjs.Shape(graphics);

var canvas = document.querySelector('#canvas');
var stage = new createjs.Stage(canvas)
var count = 0;

shape.regX = -50;
shape.regY = -50;

createjs.Ticker.addEventListener('tick', e => {
    shape.rotation = 1*count++;
  stage.update();
})

createjs.Ticker.timingMode = createjs.Ticker.RAF;

stage.addChild(shape);
stage.update();

讓咱們再來看一下這段代碼，咱們修改了shape容器的regX/regY，注意註冊點的偏移量與其餘位置屬性不一樣，regX/regY值爲正，表示向左偏移，爲負，表示向上便宜，與咱們的座標系正好相反。這裏就表示顯示對象依照註冊點爲參考點，分別右移下移50。
結果以下：（圖二）

若是讓這個圖動起來：

能夠看到，矩形是按照regX/regY設定的值進行了偏移，可是其旋轉時，依照的圓心依然是左上角，也就是容器的左上角，看來regX/regY並不能改變圓心，那麼咱們怎麼實現，矩形繞着標準座標軸(50, -50)處旋轉呢？接着往下看

(x, y) + (regX, regY)終極奧義之修改註冊點

如今咱們想將旋轉圓心也就是註冊點移動到右下角，想讓矩形繞着右下角轉，這裏應該知道的是，註冊點是始終是在容器的左上角，可是咱們想移動這個註冊點到任意位置就須要regX這種hack技術，其實我感受很玄學。解決方案是，使用x, y 將容器左上角移到原來位置的左下角，由於註冊點始終是左上角，那麼如今的註冊點就是原來的右下角，如今咱們將註冊點進行了移動，可是咱們是想原來的矩形按照右下角移動，如今立刻移動的話，是如今位置的矩形在旋轉，因此咱們還得把註冊點留下，讓咱們的矩形再「回去」，回到原來的位置，可是回到原來的位置，會有同窗問，這不就註冊點又跟着回去了嗎。這個時候就是regX/regY出現的時候了，經過regX/regY反向移動回去，這個時候就像移動了矩形的」靈魂「，雖然身體移回去了，可是註冊點沒有被帶走。我這裏只能用「靈魂」來解釋了，畢竟這裏仍是比較玄學，不是很好理解。總結一下就是regX/regY移動的是「身體」，不帶走的是註冊點 ！直接看代碼，再理解一下：

var graphics = new createjs.Graphics().beginFill('#000').drawRect(0, 0, 50, 50);
var shape = new createjs.Shape(graphics);

var canvas = document.querySelector('#canvas');
var stage = new createjs.Stage(canvas)
var count = 0;

// 將容器shape向右向下移動50，此時註冊點也移動到了標準座標系(50, -50)處
shape.x = 50;
shape.y = 50;
// 經過regX再給容器移動到原來的位置，此時「身體「進行了移動，可是註冊點並無移動
shape.regX = 50;
shape.regY = 50;

createjs.Ticker.addEventListener('tick', e => {
    shape.rotation = 1*count++;
  stage.update();
})

createjs.Ticker.timingMode = createjs.Ticker.RAF;

stage.addChild(shape);
stage.update();

咱們直接上圖：

源碼連接：http://jsrun.net/YkhKp/edit