扩展cocos slider控件，支持禁用置灰

效果图如下：

SlierExp.js

/** * Created by skyxu on 2018/4/16. */"use strict";let Direction = cc.Enum({    /**     * !#en The horizontal direction.     * !#zh 水平方向     * @property {Number} Horizontal     */    Horizontal: 0,    /**     * !#en The vertical direction.     * !#zh 垂直方向     * @property {Number} Vertical     */    Vertical: 1});cc.Class({    extends: cc.Slider,    properties: {        barSprite: {            default: null,            type: cc.Sprite,            notify: function() {                if (CC_EDITOR && this.barSprite) {                    this._updateBarSprite();                }            }        },        enableAutoGrayEffect: {            default: false,            tooltip: CC_DEV && 'i18n:COMPONENT.button.auto_gray_effect',            notify: function (oldValue) {                this._updateDisabledState();            }        },        interactable: {            default: true,            tooltip: CC_DEV && 'i18n:COMPONENT.button.interactable',            notify: function (oldValue) {                this._updateDisabledState();            }        }    },    _handleSliderLogic: function (touch) {        if (!this.interactable){            return;        }        this._updateProgress(touch);        this._emitSlideEvent();    },    _updateDisabledState(){        if (this.handle){            this.handle.enableAutoGrayEffect = this.enableAutoGrayEffect;            this.handle.interactable = this.interactable;        }        if(this.barSprite) {            this.barSprite._sgNode.setState(0);        }        if(this.enableAutoGrayEffect) {            if(this.barSprite && !this.interactable) {                this.barSprite._sgNode.setState(1);            }        }    },    _updateHandlePosition: function () {        if (!this.handle) {            return;        }        let handlelocalPos;        if (this.direction === Direction.Horizontal) {            handlelocalPos = cc.p(-this.node.width * this.node.anchorX   this.progress * this.node.width, 0);        }        else {            handlelocalPos = cc.p(0, -this.node.height * this.node.anchorY   this.progress * this.node.height);        }        let worldSpacePos = this.node.convertToWorldSpaceAR(handlelocalPos);        this.handle.node.position = this.handle.node.parent.convertToNodeSpaceAR(worldSpacePos);        this._updateBarSprite();    },    _updateProgress: function (touch) {        if (!this.handle) {            return;        }        let maxRange = null, progress = 0, newPos = this.node.convertTouchToNodeSpaceAR(touch);        if (this.direction === Direction.Horizontal) {            maxRange = this.node.width / 2 - this.handle.node.width * this.handle.node.anchorX;            progress = cc.clamp01((newPos.x   maxRange) / (maxRange * 2), 0, 1);        }        else if (this.direction === Direction.Vertical) {            maxRange = this.node.height / 2 - this.handle.node.height * this.handle.node.anchorY;            progress = cc.clamp01((newPos.y   maxRange) / (maxRange * 2), 0, 1);        }        this.progress = progress;        this._updateBarSprite();    },    _updateBarSprite(){        if (!this.barSprite) {            return;        }        let maxWidth = this.node.width;        let curWidth = maxWidth * this.progress;        this.barSprite.node.width = curWidth;        // mark: 左对齐        this.barSprite.node.x = this.barSprite.node.anchorX * this.barSprite.node.width - this.node.width * this.node.anchorX;    }});

 

来源：http://www.icode9.com/content-4-60301.html