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