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