LayaAir Sprite 旋转缩放

谁借莪１个温暖的怀抱￠ 2022-04-10 12:54 597阅读 0赞

**目录**

Sprite 旋转缩放

编码示例

旋转

缩放

--------------------

# Sprite 旋转缩放 #

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

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#pivotX" rel="nofollow">pivotX</a> : Number ，X轴 轴心点的位置，单位为像素，默认为0。轴心点会影响对象位置，缩放中心，旋转中心。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#pivotY" rel="nofollow">pivotY</a> : Number ，Y轴 轴心点的位置，单位为像素，默认为0。轴心点会影响对象位置，缩放中心，旋转中心。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#rotation" rel="nofollow">rotation</a> : Number ，旋转角度，默认值为0。以角度为单位。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#scaleX" rel="nofollow">scaleX</a> : Number ，X轴缩放值，默认值为1。设置为负数，可以实现水平反转效果，比如scaleX=-1。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#scaleY" rel="nofollow">scaleY</a> : Number ，Y轴缩放值，默认值为1。设置为负数，可以实现垂直反转效果，比如scaleX=-1。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#scale%28%29" rel="nofollow">scale</a>(scaleX:Number, scaleY:Number, speedMode:Boolean = false):Sprite</p> <p><span style="color:#f33b45;">设置缩放</span>。相当于分别设置scaleX和scaleY属性。 因为返回值为Sprite对象本身，所以可以使用如下语法：spr.scale(...).pos(50, 100);</p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&amp;class=laya.display.Sprite#pivot%28%29" rel="nofollow">pivot</a>(x:Number, y:Number):Sprite</p> <p><span style="color:#f33b45;">设置轴心点</span>。相当于分别设置pivotX和pivotY属性。 因为返回值为Sprite对象本身，所以可以使用如下语法：spr.pivot(...).pos(50, 100);</p> </td> 
  </tr> 
 </tbody> 
</table>

# 编码示例 #

##  旋转 ##

![20190107133913560.gif][]

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

实现代码如下：

## 缩放 ##

![20190107141116192.gif][]

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

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

[laya.display.Sprite]: https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&class=laya.display.Sprite
[20190107133913560.gif]: /images/20220330/8b4896406d7a47a6939d956911ee94ce.png
[pivot]: https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&class=laya.display.Sprite#pivot%28%29
[20190107141116192.gif]: /images/20220330/4d71e740d16c4e908296e9798a721125.png
[https_layaair.ldc.layabox.com_demo2_language_ch_category_2d_group_Sprite_name_RoateAndScale]: https://layaair.ldc.layabox.com/demo2/?language=ch&category=2d&group=Sprite&name=RoateAndScale