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)
}

}