标签：

效果图如下：

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

标签：
来源： https://www.cnblogs.com/skyxu123/p/9817520.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。