欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)
	});
相关标签: h5