Sprite 旋转缩放

1、Sprite 是基本的显示图形的显示列表节点， Sprite 默认没有宽高，默认不接受鼠标事件。

2、通过 graphics 可以绘制图片或者矢量图，支持旋转，缩放，位移等操作。

3、laya.display.Sprite 同时也是容器类，可用来添加多个子节点。

4、旋转缩放操作主要使用到如下 API：

pivotX : Number ，X轴轴心点的位置，单位为像素，默认为0。轴心点会影响对象位置，缩放中心，旋转中心。

pivotY : Number ，Y轴轴心点的位置，单位为像素，默认为0。轴心点会影响对象位置，缩放中心，旋转中心。

rotation : Number ，旋转角度，默认值为0。以角度为单位。

scaleX : Number ，X轴缩放值，默认值为1。设置为负数，可以实现水平反转效果，比如scaleX=-1。

scaleY : Number ，Y轴缩放值，默认值为1。设置为负数，可以实现垂直反转效果，比如scaleX=-1。

scale(scaleX:Number, scaleY:Number, speedMode:Boolean = false):Sprite

设置缩放。相当于分别设置scaleX和scaleY属性。因为返回值为Sprite对象本身，所以可以使用如下语法：spr.scale(...).pos(50, 100);

pivot(x:Number, y:Number):Sprite

设置轴心点。相当于分别设置pivotX和pivotY属性。因为返回值为Sprite对象本身，所以可以使用如下语法：spr.pivot(...).pos(50, 100);

编码示例

旋转

首先必须明确何为"轴心点"? 一个精灵 Sprite默认的轴心点是在自己的左上角，使用 pos(x,y)设置Sprite的位置的时候所以默认是以左上角进行定位的(如上图左)，如果想像右侧一样以自己中心为轴进行旋转呢？就必须设置 Sprite 的轴心位置 pivot，布局将会以轴心位置进行布局。

实现代码如下：

(function () {Laya.init(1080, 1920, Laya.WebGL);//初始化引擎，不支持WebGL时自动切换至CanvasLaya.stage.bgColor = "#252525";var label_1 = createLabel("以左上角为轴");/**组建显示的位置,为设置Sprite的轴心时，轴心默认在自己的左上角，所有的 UI 都是继承 Sprite 的* 所以pos以Sprite的左上角进行对齐*/label_1.pos(150, 100);/**帧动画，每隔1帧的时间进行回调 */Laya.timer.frameLoop(1, this, function () {label_1.rotation += 0.5;});var label_2 = createLabel("以我中心为轴");/**设置 label的轴心为自己的中心位置* pos是以组件的轴心进行定位的，即 (450,100) 是 label 中心的位置*/label_2.pivot(label_2.width / 2, label_2.height / 2);label_2.pos(450, 100);//组建显示的位置Laya.timer.frameLoop(1, this, function () {label_2.rotation += 0.5;});//创建一个标签并添加到舞台function createLabel(message) {var label = new Laya.Label(message);label.fontSize = 30;//文本的字体大小label.color = "#fff";//文本颜色Laya.stage.addChild(label);//添加到舞台显示return label;}
})();

缩放

在旋转的基础上加上缩放，实现代码如下：

(function () {Laya.init(1080, 1920, Laya.WebGL);//初始化引擎，不支持WebGL时自动切换至CanvasLaya.stage.bgColor = "#252525";Laya.Stat.show(0, 0);/**显示性能面板 */var sprite = new Laya.Sprite();sprite.loadImage("http://tomcat.apache.org/res/images/tomcat.png");/**尺寸 129 x 92 */sprite.pos(450, 100);Laya.stage.addChild(sprite);/**将轴心设置在Sprite的中心*/sprite.pivot(65, 46);/**flag：true表示缩放，false表示放大* 使用frameLoop帧动画，每隔1帧回调执行一次*/var flag = true;Laya.timer.frameLoop(1, this, function () {sprite.rotation += 2;/**每次旋转2度 */if (flag) {/**缩小 0.01倍 */sprite.scaleX -= 0.01;sprite.scaleY -= 0.01;} else {/**放大0.01倍 */sprite.scaleX += 0.01;sprite.scaleY += 0.01;}/** 1->0是正向缩小，0->-1是反向放大，所以达到-1后，再反向 -1->0 缩小，再 0-1>正向放大，循环往复*/flag = sprite.scaleX <= -1 ? false : flag;flag = sprite.scaleX >= 1 ? true : flag;});})();

官网 demo：https://layaair.ldc.layabox.com/demo2/?language=ch&category=2d&group=Sprite&name=RoateAndScale

LayaAir Sprite 旋转缩放相关推荐

PixiJS案例——移动旋转缩放
简介: 对于选择的图片进行,移动.旋转.缩放.使用 hammer.js 做拖拽操作. 思路: 使用pixi创建一个canvas 添加一个需要移动的精灵使用hammer做拖拽.双指旋转和缩放素材: ...
[cocos2d-x]图层的旋转缩放效果
要实现一个两个图层叠加在一起,然后点击其中的一个图层,实现另外一个图层的旋转缩放的效果. 预期效果: 1.实现两个layer添加在一个场景中. 2.实现点击一个场景能实现另一个场景的旋转缩放的功能. ...
图像中的一条直线在旋转缩放过程中会有分段现象，或产生分段节点
图像中的一条直线在旋转缩放过程中会有分段现象. 图像在Windows照片查看器中打开.显示. 使用滚轮放大缩小. 原来的一条直线会分段. 图像旋转方式:16相位(33端).32 原图: 经旋转45,放 ...
图片的旋转,缩放和拖拽
由于之前公司项目的原因,我被要求完成一个头像上传功能,其中包括要实现上传图片的旋转,缩放和拖拽,更关键的是要用JS实现... 作为一个不大喜欢用JS的人来说这是一个很严峻的挑战,不过随着项目的进行我的 ...
Unity3D使用鼠标旋转缩放平移视角
Unity使用鼠标旋转缩放平移视角用代码在Game界面完美实现Scene界面的操作方法. 使用方法:把脚本挂在相机上,把跟踪的target拖到脚本上. 视角跟踪的是一个空物体,当然如果你是做RPG游 ...
用矩阵表示图形旋转缩放变换
二维图形 1.缩放假设x和y都缩小到0.5倍那新的x' = 0.5x 新的y' = 0.5y 我们现在通用化一下,假设x方向缩放为Sx,y方向缩放为Sy,并且用矩阵的方法可表示如下 -1 < ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
OpenGL相机自由移动旋转缩放，四元数,欧拉角，LookAt
OpenGL相机自由移动旋转缩放,四元数,欧拉角,LookAt 定义相机摄像机位置右轴上轴 Look At 自由移动相机左右移动移动速度视角移动欧拉角通过欧拉角计算实际的方向向量缩放 ...
unity 3D模型展示旋转缩放
目标: 在UI层上自由观察3D 模型,实现鼠标控制模型的旋转,缩放&& 触摸屏手势控制模型的旋转缩放控制: 这里仅将控制代码挂载到相机上,通过对相机的控制来观察模型. 基本上为最小单 ...
Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放实现思路单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...

LayaAir Sprite 旋转缩放

Sprite 旋转缩放

编码示例

旋转

缩放

LayaAir Sprite 旋转缩放相关推荐

最新文章

热门文章