There are two ways to fill a Bitmap: one is to stretch the image to fill the region, and the other is to repeat the image to fill the region. When you create a Bitmap object, the first fill method is selected by default. Let's take a look at the following example code. In this example, we use the default filling method, and the texture image used is a 100 * 100 image. We set the image width to 2 times and the height to 3 times.
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);
}
}
If we make maps in the game that are constantly repeated, then we can use the second filling method, which is still the picture, and we set the filling method to repeated arrangement.
Setting the fill method requires changing the fillMode property in Bitmap. The specific example code is as follows:
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);
}
}
We can see that a stretched pig turned into six pigs in three rows and two columns.