cocos2d-js自定义CheckBox

来源：互联网发布：车万翔老师的python课编辑：程序博客网时间：2024/06/01 21:07
这是我自定义CheckBox的效果图：
整个CheckBox不复杂、就是继承于Sprite然后由三个精灵、加上一些动作跟监听组成
代码如下：
var CheckBox = cc.Sprite.extend({    sliderFrame:null,       //外框    sliderBar:null,         //  内框    sliderThumb:null,       //  按钮    maskLength:null,        //slider的长度    movePosition:null,      //按钮移动的位置    clickListener: null,    //点击的监听    isChecked: true,        //选中状态  默认选中    ctor: function () {        this._super();        winSize = cc.winSize;        var self = this;        //框        var position = cc.p(winSize.width/2,winSize.height/2);        self.sliderFrame = new cc.Sprite(res.sliderMask);        self.sliderFrame.setPosition(position.x,position.y);        self.movePosition = self.sliderFrame.getPosition();        self.sliderFrame.setAnchorPoint(0,0.5);        self.maskLength = self.sliderFrame.getContentSize().height;        self.addChild(self.sliderFrame);        //内框        self.sliderBar = new cc.Sprite(res.sliderMask);        self.sliderBar.setPosition(position.x + self.maskLength+2,position.y);        self.sliderBar.scaleX = 0.9;        self.sliderBar.scaleY = 0.8;        self.addChild(self.sliderBar);        var tint = cc.tintTo(0,113,255,57);        self.sliderBar.runAction(tint);        //按钮        self.sliderThumb = new cc.Sprite(res.sliderThumb);        self.sliderThumb.setScale(1.5);        self.sliderThumb.setAnchorPoint(0,0.5);        self.sliderThumb.setPosition(position.x + self.maskLength,position.y );        self.addChild(self.sliderThumb);    },    onEnter: function () {        this._super();        var self = this;        if (!self.isChecked){   //判断是哪种状态            var move = new cc.moveTo(0,self.movePosition.x,self.movePosition.y);            var fadeIn = new cc.fadeIn(0);            self.sliderThumb.runAction(move);            self.sliderBar.runAction(fadeIn.reverse());        }        self.createListener();        cc.eventManager.addListener(self.clickListener,self.sliderFrame);    },    createListener: function () {        var self = this;        var rect;        var fadeIn = new cc.fadeIn(0.2);        self.clickListener= cc.EventListener.create({            event: cc.EventListener.TOUCH_ONE_BY_ONE,            swallowTouches:false,            onTouchBegan: function (touche,event) {                var point = touche.getLocation();                rect = event.getCurrentTarget().getBoundingBoxToWorld();                return cc.rectContainsPoint(rect, point);            },            onTouchEnded: function (touche) {                var point = touche.getLocation();                if (cc.rectContainsPoint(rect,point)){                    //让按钮发生移动 //判断按钮在哪个位置 在左边则向右移动 在右边则向左边                    self.sliderThumb.stopAllActions();                    if (self.sliderThumb.getPosition().x > self.sliderFrame.getPosition().x){      // 未选中时候 在右边 向左移动                        self.isChecked = false;   //未选中状态                        var move = new cc.moveTo(0.2,self.movePosition.x,self.movePosition.y);                        self.sliderBar.runAction(fadeIn.reverse());                    }else {                        self.isChecked = true;    //选中状态  在左边 向右移动                        move = new cc.moveTo(0.2,self.movePosition.x + self.maskLength,self.movePosition.y);                        self.sliderBar.runAction(fadeIn);                    }                    self.sliderThumb.runAction(move);                    return true;                }                return false;            }        });    },    /**     * 得到选中状态     */    getChecked: function () {        return this.isChecked;    },    /**     * 设置选中状态     */    setChecked: function (isChecked) {        this.isChecked = isChecked;    }});
0 0