分享一个渲染远程图片的方法

Creator 2.x
#1 
const { ccclass, property } = cc._decorator;

@ccclass
export default class NetSprite extends cc.Node {
  @property({ type: cc.String })
  _src: string;

  @property({ type: cc.Size })
  size: cc.Size = new cc.Size(0, 0);

  sprite: cc.Sprite;
  _spriteFrame: cc.SpriteFrame;

  set src(src: string) {
    this._src = src;

    if (!this.sprite) {
      this.sprite = this.addComponent(cc.Sprite);
    }

    this._loadFromUrl(this._src);
  }

  get src() {
    return this._src;
  }

  onload?: () => any;

  private _loadFromUrl(src: string) {
    cc.loader.load(src, (err, texture: cc.Texture2D) => {
      if (err) {
        cc.log(err);
        return;
      }

      this._spriteFrame = new cc.SpriteFrame(texture);

      this.sprite.spriteFrame = this._spriteFrame;

      if (this.size.width === 0 && this.size.height === 0) {
        this.setContentSize(this._spriteFrame.getRect());
      } else {
        this.setContentSize(this.size);
      }

      this.onload && this.onload();
    });
  }
}

ts写的, js删掉类型就OK了

用法:

start() {
    const netSprite = new NetSprite();
    netSprite.src = 'http://xxxx/1.png';
    this.node.addChild(netSprite);
  }

为了模拟DOM的image标签写了这么个东西

#2

嗯…我还是觉得你继承cc.Component好一点，更符合组件化开发

#3

那就需要this.node.getComponent(NetSprite).src = '' 太懒了:joy:

#4

然后就出现了跨域问题，想了一下如果不从服务端那边解决的话，也不用模拟器，就单纯想在浏览器里测试，应该如何解决?(论坛好多帖子都是讲让服务器那边来解决，没有前端解决办法吗？)