PIXIJS九宮格

pixijs是一個接近原生的H5引擎，沒有可視化的界面，在九宮格方面是沒有界面去操作的，需要自己手工動手開發；

RenderTexture 這個類是可以把紋理進行有矩形選擇複製，這樣就可以實現區域內的複製和平鋪功能，有了這些功能我們就可以做九宮格了；

上面是我們要做九宮格的素材；這樣我先確定一些數據，第一寬度第二寬度，第一高度第二高度；通過這四個參數來定九宮格的區域；上面素材的定的 [45,169-45,45,143-45]；其中45是邊角弧度，169是素材寬度，143是素材高度；

下面的第一個類是調用基類的，在這裏我們需要建立1-9個區域；

import * as PIXI from '../libs/pixi'
import core from './index'

class main{
	constructor(pic,context,framesize,size,pos){
        for(var i=1;i<10;i++){
        	new Frame('inframe.png',context,i,framesize,size,pos);
        }
        

	}
}

---

下面的類是基類，在基類中我們根據前端傳過來的1-9的區域做一些座標的調整以及寬高上的拉伸，這樣九宮格即可完成；

class frame {
		
	constructor(str,context,type,framesize,size,pos){

	var pic = this.pic = new PIXI.Sprite(PIXI.Texture.fromImage(str));
	//console.log(pic.width);
	switch(type){
		case 1:
			pic.x = 0;
			pic.y = 0;
			break;
		case 2:
			pic.x -= framesize[0];
			pic.y = 0;
			break;
		case 3:
			pic.x -= framesize[1];
			pic.y = 0;
			break;
		case 4:
			pic.x = 0;
			pic.y -= framesize[2];
			break;
		case 5:
			pic.x -= framesize[0];
			pic.y -= framesize[2];
			break;
		case 6:
			pic.x -= framesize[1];
			pic.y -= framesize[2];
			break;
		case 7:
			pic.x = 0;
			pic.y -= framesize[3];
			break;
		case 8:
			pic.x -= framesize[0];
			pic.y -= framesize[3];
			break;
		case 9:
			pic.x -= framesize[1];
			pic.y -= framesize[3];
			break;
	}
	
	
	this.canvasscale = core.view.width/750;
	this.context = context;
	this.type = type;
	this.size = size.map(i=>i*this.canvasscale)
	this.framesize = framesize;
	this.pos = pos.map(i=>i*this.canvasscale);
	this.init();
}
init(){

	var brt 	= null;
	var rt  	= null;
	var sprite 	= null;

	switch(this.type){
		case 1:
			brt 		= new PIXI.BaseRenderTexture(this.framesize[0],this.framesize[2], PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0];
			sprite.y 	= this.pos[1];
			break;
		case 2:
			brt 		= new PIXI.BaseRenderTexture(1,this.framesize[2] , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0] + this.framesize[0];
			sprite.y 	= this.pos[1] ;

			sprite.width = this.size[0] - (this.framesize[0] + (this.pic.width-this.framesize[1]));

			break;
		case 3:
			brt 		= new PIXI.BaseRenderTexture((this.pic.width-this.framesize[1]),this.framesize[2] , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0]+this.size[0]-(this.pic.width-this.framesize[1]);
			sprite.y 	= this.pos[1];


			break;
		case 4:
			brt 		= new PIXI.BaseRenderTexture(this.framesize[0],1, PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0];
			sprite.y 	= this.pos[1]+this.framesize[2];

			sprite.height = this.size[1] - (this.framesize[2] + (this.pic.height-this.framesize[3]));
			

			break;
		case 5:
			brt 		= new PIXI.BaseRenderTexture(2,2);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0]+this.framesize[0];
			sprite.y 	= this.pos[1]+this.framesize[2];

			sprite.width = this.size[0] - (this.framesize[0] + (this.pic.width-this.framesize[1]));
			sprite.height = this.size[1] - (this.framesize[2] + (this.pic.height-this.framesize[3]));

			console.log('height',sprite.height,sprite.width)
			break;
		case 6:
			brt 		= new PIXI.BaseRenderTexture(this.pic.width-this.framesize[1],1 , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0]+this.size[0]-(this.pic.width-this.framesize[1]);
			sprite.y 	= this.pos[1]+this.framesize[2];

			sprite.height = this.size[1] - (this.framesize[2] + (this.pic.height-this.framesize[3]));
			break;
		case 7:
			brt 		= new PIXI.BaseRenderTexture(this.framesize[1],this.pic.height-this.framesize[3] , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0];
			sprite.y 	= this.pos[1]+this.size[1]-(this.pic.height-this.framesize[3]);
			break;
		case 8:
			brt 		= new PIXI.BaseRenderTexture(1,this.framesize[2] , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0]+this.framesize[0];
			sprite.y 	= this.pos[1]+this.size[1]-(this.pic.height-this.framesize[3]);

			sprite.scale.x = this.size[0] - (this.framesize[0] + (this.pic.width-this.framesize[1]));

			break;
		case 9:
			brt 		= new PIXI.BaseRenderTexture(this.pic.width-this.framesize[1],this.framesize[2] , PIXI.SCALE_MODES.LINEAR, 1);
			rt 			= new PIXI.RenderTexture(brt);
			sprite 		= new PIXI.Sprite(rt);
			sprite.x 	= this.pos[0]+this.size[0]-(this.pic.width-this.framesize[1]);;
			sprite.y 	= this.pos[1]+this.size[1]-(this.pic.height-this.framesize[3]);
			break;
	}

	




	this.context.addChild(sprite);
	core.renderer.render(this.pic,rt)
}

}