什么是eui缩放

eui 是 egret 的 ui 库，提供了丰富的 ui 组件以及配套的主题模板。在开发过程中，我们常常会遇到需要缩放 ui 组件的需求，比如让应用适配不同屏幕尺寸的设备。eui 提供了多种缩放方式，可以帮助我们轻松实现这些需求。

eui缩放的三种方式

下面我们分别介绍 eui 缩放的三种方式。

手动缩放

eui 中每个组件都有 scaleX 和 scaleY 两个属性，它们分别代表水平方向和竖直方向的缩放比例。我们可以通过修改这两个属性来实现手动缩放。比如我们可以在代码中指定一个缩放比例，然后将这个比例赋值给组件的 scaleX 和 scaleY 属性。

比如：

```AS3 myComponent.scaleX = 0.5; myComponent.scaleY = 0.5; ```

这样就可以将 myComponent 缩小为原来的一半了。

自动缩放

eui 中的自动缩放方式可以让我们在不手动设置缩放比例的情况下，自动适配不同屏幕尺寸的设备。

我们可以在 eui 应用程序的 main 方法中指定一个默认的缩放比例：

```AS3 var contentWidth:number = 640; var contentHeight:number = 1136; var scaleFactor:number = Math.min(stage.stageWidth/contentWidth, stage.stageHeight/contentHeight); this.stage.setContentSize(contentWidth*scaleFactor, contentHeight*scaleFactor); ```

上面的代码会计算出当前舞台的宽高与缩放比例，然后将缩放比例应用到 eui 应用程序中的所有组件中。

布局缩放

eui 中的布局缩放方式可以让我们在不改变缩放比例的情况下，自动调整组件的大小和位置，从而适配不同屏幕尺寸的设备。

比如我们可以在代码中指定一个布局容器，然后将需要布局的组件添加到容器中：

```AS3 var group:eui.Group = new eui.Group(); group.width = 640; group.height = 1136; this.addChild(group); var myComponent:eui.Component = new eui.Component(); myComponent.width = 200; myComponent.height = 100; group.addChild(myComponent); ```

上面的代码中，我们创建了一个宽高为 640x1136 的 eui.Group 容器，然后将一个宽高为 200x100 的组件添加到容器中。

接下来，我们可以使用 eui 布局功能进行布局。比如我们可以使用水平和垂直居中布局：

```AS3 var layout:eui.VerticalCenterLayout = new eui.VerticalCenterLayout(); group.layout = layout; ```

这样，无论容器所在的设备屏幕尺寸如何，myComponent 都会自动水平和垂直居中显示。

总结

通过手动缩放、自动缩放和布局缩放三种方式，我们可以轻松实现 eui 组件的缩放适配。在实际开发中，我们可以根据实际需求选择不同的缩放方式，使得我们的应用在不同的设备上都有良好的用户体验。