80 lines
2.0 KiB
Markdown
80 lines
2.0 KiB
Markdown
|
||
位图的填充方式有两种，
|
||
|
||
* 拉伸图像以填充区域
|
||
|
||
* 重复图像以填充区域
|
||
|
||
### 1.拉伸图像填充
|
||
创建 `Bitmap` 对象时会默认选择第一种填充方式。
|
||
|
||
下面是的示例中，使用默认填充方式。使用的纹理图片为一张100*100的图片。图像宽度设置为2倍，高度设置为3倍。
|
||
|
||
```javascript
|
||
class BitmapTest extends egret.DisplayObjectContainer{
|
||
public constructor()
|
||
{
|
||
super();
|
||
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
|
||
}
|
||
private onAddToStage(event:egret.Event) {
|
||
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComp, this);
|
||
RES.loadConfig("resource/resource.json", "resource/");
|
||
RES.loadGroup("preload");
|
||
}
|
||
private onGroupComp()
|
||
{
|
||
var img:egret.Bitmap = new egret.Bitmap();
|
||
img.texture = RES.getRes("box");
|
||
img.width *= 2;
|
||
img.height *= 3;
|
||
this.addChild(img);
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
编译后运行，效果如图：
|
||
|
||
|
||
|
||
|
||
### 2.重复图像填充
|
||
|
||
设置填充方法需要改变 `Bitmap` 中的 `fillMode` 属性。
|
||
|
||
```javascript
|
||
img.fillMode = egret.BitmapFillMode.REPEAT
|
||
```
|
||
|
||
具体示例代码如下：
|
||
|
||
```javascript
|
||
class BitmapTest extends egret.DisplayObjectContainer{
|
||
public constructor()
|
||
{
|
||
super();
|
||
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
|
||
}
|
||
private onAddToStage(event:egret.Event) {
|
||
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComp, this);
|
||
RES.loadConfig("resource/resource.json", "resource/");
|
||
RES.loadGroup("preload");
|
||
}
|
||
private onGroupComp()
|
||
{
|
||
var img:egret.Bitmap = new egret.Bitmap();
|
||
img.texture = RES.getRes("box");
|
||
img.fillMode = egret.BitmapFillMode.REPEAT;
|
||
img.width *= 2;
|
||
img.height *= 3;
|
||
this.addChild(img);
|
||
}
|
||
}
|
||
```
|
||
|
||
编译后运行，效果如图：
|
||
|
||
|
||
|