how to use an image to fill an area

[h5developer]

Hello,

I'm new with phaser and i'm looking some stuff on internet and some tutorials and i can't find a way to take a image ( width 13px and height 400px) and fill an area of 400px*400px. I only want to use 1px of the middle to fill the middle of the area, the sides of the image and the area stay the same.

 

what should I do?

 

Thankx in advance.

[lewster32]

It sounds like you're describing sliced scaling (i.e. 3-slice or 9-slice) which Phaser doesn't do natively, but can be achieved with a bit of bitmap manipulation: http://jsfiddle.net/lewster32/81pzgs4z/ 

[h5developer]

thanks you! lewster32, I've resolved this problem by using bimapdata.

 

there are the codes(now I'm filling an area of 830px*462px):

 

        var bmd = this.make.bitmapData(830,462);

        bmd.addToWorld(540, 340, 0.5, 0.52);

        var left_area = new Phaser.Rectangle(0, 0, 6, 462);

        var middle_area = new Phaser.Rectangle(6, 0, 1, 462);

        var right_area = new Phaser.Rectangle(7, 0, 6, 462);

        bmd.copyRect('bg_board_6_1_6', left_area, 0, 0);

        bmd.copyRect('bg_board_6_1_6', right_area, 824, 0);

        for(var i = 6; i < 824 ; i++) {

            bmd.copyRect('bg_board_6_1_6', middle_area, i, 0);

        }

 

I referred to this example http://examples.phaser.io/_site/view_full.html?d=bitmapdata&f=flood+fill.js&t=flood%20fill 

 

but its preformance seems not very good;