Easeljs之regX/regY详解

Parkeeers

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轴上,注册点的偏移量。那么一个新建的显示对象它的默认注册点在哪里?答案是,其注册点在包含它的容器的左上角.
举个栗子:
https://avatars2.githubusercontent.com/u/22350985?s=460&v=4

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

阅读 5.4k

createjs由浅入深
由于业务的需求,开始做H5动画项目,第一次接触createjs,附上我学习的笔记以及心得,一起学习一起交流

求知若渴,保持谦逊

770 声望
32 粉丝
0 条评论

求知若渴,保持谦逊

770 声望
32 粉丝
文章目录
宣传栏