box-client/assets/script/core/view/JMNetImage.js

/**
 * 在线图片
 * 主要功能：根据图片下载地址加载在线图片
 */
cc.Class({
    extends: cc.Component,

    editor: {
        menu: '嘉米公用/JMNetImage'
    },

    properties: {
        iconUrl: {
            type: cc.String,
            get () {
                return this._iconUrl;
            },
            set (value) {
                if (this._iconUrl !== value) {
                    this._iconUrl = value;
                    if (this._sprite) {
                        this._sprite.spriteFrame = this._defaultSpriteFrame;
                    }

                    this.updateSprite();
                }
            },
            tooltip: '图片下载地址'
        },
        _iconUrl: '',

        defaultSpriteFrame: {
            type: cc.SpriteFrame,
            get () {
                return this._defaultSpriteFrame;
            },
            set (value) {
                if (this._defaultSpriteFrame !== value) {
                    this._defaultSpriteFrame = value;

                    if (!this.iconUrl || this.iconUrl.length == 0) {
                        if (this._sprite) {
                            this._sprite.spriteFrame = this._defaultSpriteFrame;
                        }
                    }
                }
            },
            tooltip: '默认图片'
        },
        _defaultSpriteFrame: undefined
    },

    onEnable: function () {
        cc.game.on('e_mgr_net_image_download_ok', this._handleDownloadOK, this);
    },

    onDisable: function () {
        cc.game.targetOff(this);
    },

    start () {
        this._sprite = this.getComponent(cc.Sprite);
        if (!this._defaultSpriteFrame) {
            this._defaultSpriteFrame = this._sprite.spriteFrame;
        } else {
            this._sprite.spriteFrame = this._defaultSpriteFrame;
        }

        this.updateSprite();
    },

    /**
     * 刷新精灵
     *
     * @author Pyden
     * @date 2019-03-21
     * @returns
     */
    updateSprite () {
        if (!this._sprite) {
            return;
        }

        if (!this.iconUrl || this.iconUrl.length == 0) {
            this._sprite.spriteFrame = this._defaultSpriteFrame;
            return;
        }

        // 目前仅支持原生平台(mobile app, desktop app, or simulator)
        if (!CC_JSB) {
            // web 平台 直接load资源
            // 如果浏览器没有缓存,会去下载然后回调
            // 如果浏览器有缓存,会去磁盘本地加载然后回调
            // http://www.a.com/icon.png
            // http://www.a.com/icon.png?v=1.0
            // 上面两个地址虽然指向了同一个服务器icon资源
            // 但是对于浏览器来说是两个不同url,会进行两次缓存
            // 需要避免修改后缀造成的多次请求,也可以使用这个特性刷新本地缓存
            cc.loader.load({url: this.iconUrl, type: 'png'}, (error, texture) => {
                if (!error && cc.isValid(this.node, true)) {
                    this._sprite.spriteFrame = new cc.SpriteFrame(texture);
                }
            });
        } else {
            // native 平台
            // 如果本地有图标了，则直接展示
            let fullPath = G.NetImageMgr.getImageFullPathWithUrl(this.iconUrl);
            if (fullPath) {
                // 资源在image文件夹中
                cc.loader.load(fullPath, (error, texture) => {
                    if (error) {
                        G.LogUtils.error(error);
                        return;
                    }
                    // 类型转换
                    if (texture instanceof Image) {
                        let t = new cc.Texture2D();
                        t.initWithElement(texture);
                        texture = t;
                    }
                    if (cc.isValid(this.node, true)) {
                        this._sprite.spriteFrame = new cc.SpriteFrame(texture);
                    }
                });
            } else {
                // 真实地址
                let md5Path = cc.url.raw('resources/res_image/icon/' + cc.path.basename(this.iconUrl));
                if (jsb.fileUtils.isFileExist(md5Path)) {
                    // 资源在本地包内
                    let url = 'res_image/icon/' + cc.path.mainFileName(cc.path.basename(this.iconUrl));
                    cc.loader.loadRes(url, (error, texture) => {
                        if (error) {
                            G.LogUtils.error(error);
                            return;
                        }
                        // 类型转换
                        if (texture instanceof Image) {
                            let t = new cc.Texture2D();
                            t.initWithElement(texture);
                            texture = t;
                        }
                        if (cc.isValid(this.node, true)) {
                            this._sprite.spriteFrame = new cc.SpriteFrame(texture);
                        }
                    });
                } else {
                    // 缓存目录和包内都没有就去下载
                    G.NetImageMgr.downloadImage(this.iconUrl);
                }
            }
        }
    },

    // ---------------- 私有方法分割线 ----------------

    /**
     * 下载成功的回调
     *
     * @author Pyden
     * @date 2019-03-21
     * @param {string} url 下载地址
     */
    _handleDownloadOK (url) {
        if (url == this.iconUrl) {
            this.updateSprite();
        }
    }
});