pixijs自制下拉菜单类
程序员文章站
2022-04-13 17:45:08
...
实现基础功能:
1、实现的基础的外面大按钮的控制面板有显示与否;
2、通过一个回调将选择的菜单索引回抛给上层;
import * as PIXI from '../libs/pixi'
import core from './index'
//import Button from './mybutton'
export default class main {
constructor(menu,context,pos,backcall){
//var _menu = ['选择难度'].concat(menu);
this.context = context;
this.scale = core.view.width/750;
console.log('scale',this.scale)
this.menucontext = new PIXI.Container();
this.curr = 0;
this.show = false;
var that = this;
var creatbtn = (txt)=>{
var menucontext = new PIXI.Container();
menucontext.name = (that.curr==0?'btn_':'drop_')+that.curr;
menucontext.x = pos.x;
menucontext.y = pos.y;
var bg = new PIXI.Graphics();
bg.beginFill(0x131227,.8);
bg.drawRect(0,0,100*that.scale,35*that.scale);
bg.endFill();
bg.y = that.curr*40*that.scale;
menucontext.addChild(bg);
var stylecoin = {
fontSize: 30*that.scale,
fill:"0xeade1a",
fontFamily:["幼圆","Microsoft YaHei","黑体","sans-serif",],
fontWeight: 'bold',
letterSpacing:2
};
var _txt = new PIXI.Text(txt, stylecoin);
_txt.x = (100*that.scale-_txt.width)/2;
_txt.y = that.curr*40*that.scale;
//return context;
menucontext.addChild(_txt)
menucontext.interactive = true;
menucontext.visible = that.curr==0?true:that.show;
menucontext.on('touchstart',(event)=>{
//console.log(event.currentTarget.name);
var index = parseInt(event.currentTarget.name.split('_')[1]);
if(index==0){
that.show = !that.show;
that.context.children.map(i=>{
//console.log(i.name)
if(i.name&&i.name.indexOf('drop')==0){
i.visible = that.show;
}
})
}else{
backcall(index);
}
})
that.context.addChild(menucontext);
that.curr++;
}
creatbtn('请选择')
menu.map((i,index)=>{
creatbtn(i)
//context.addChild(_btn);
})
}
}
调用的地方:
var _drop = new dropdown(['初级','中级','高级'],this.scene,{
x:this.core.view.width/2,
y:this.userarea.y+60
},(index)=>{
console.log('index',index)
});
推荐阅读
-
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
-
Java自制分页工具类
-
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
-
css自定义下拉菜单,通过伪类控制展开隐藏_html/css_WEB-ITnose
-
css自定义下拉菜单,通过伪类控制展开隐藏_html/css_WEB-ITnose
-
css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose
-
pixijs自制下拉菜单类
-
css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose
-
JS实多级联动下拉菜单类,简单实现省市区联动菜单!_表单特效