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