(3) 图像的加载和处理

图像的加载和处理

本章主要围绕Bitmap类展开
Bitmap本质上是PIXI.BaseTexture的一层 wrapper
它提供了对图片资源的异步加载, 回调等方法
同时暴露出Canvas.context对象来为外部使用来绘制图形

主线 1: 加载一张 Image

加载图片是从静态方法Bitmap.load入手的

Bitmap.load = function (url) {
  const bitmap = Object.create(Bitmap.prototype);
  bitmap.initialize();
  bitmap._url = url; // ※ 设置图片路径
  bitmap._startLoading(); // ※ 触发加载
  return bitmap;
};

Bitmap.prototype._startLoading = function () {
  // 实质上相当于创建了一个Image标签
  this._image = new Image();
  // 绑定回调事件
  this._image.onload = this._onLoad.bind(this);
  this._image.onerror = this._onError.bind(this);
  this._destroyCanvas();
  this._loadingState = 'loading';
  // 和加密相关的内容
  if (Utils.hasEncryptedImages()) {
    this._startDecrypting();
  } else {
    // 通过设置url来浏览器就会发送异步请求
    this._image.src = this._url;
  }
};

// 回调事件
Bitmap.prototype._onLoad = function () {
  // 和加密相关
  if (Utils.hasEncryptedImages()) {
    URL.revokeObjectURL(this._image.src);
  }
  this._loadingState = 'loaded';
  // 将Image作为source创建BaseTexture
  this._createBaseTexture(this._image);
  // 激活所有监听中的回调函数, 见下文
  this._callLoadListeners();
};

Bitmap.prototype._createBaseTexture = function (source) {
  // ※ 通过bitmap.baseTexture暴露给外部
  this._baseTexture = new PIXI.BaseTexture(source);
  this._baseTexture.mipmap = false;
  this._baseTexture.width = source.width;
  this._baseTexture.height = source.height;
  // 更新缩放模式, 关于PIXI的具体配置就不多在本系列里阐述了
  this._updateScaleMode();
};

支线 onLoad 的监听事件

Bitmap 提供了注册监听事件的方法, 让外部及时知道图片已经加载完毕

// 顺便吐槽一下他们listener居然都给拼错了
// 看起来是没用SpellingChecker啊
Bitmap.prototype.addLoadListener = function (listner) {
  // 如果尚未就绪则加入监听者队列, 否则就直接触发
  if (!this.isReady()) {
    this._loadListeners.push(listner);
  } else {
    listner(this);
  }
};

主线 2: 加载 Canvas 对象

Canvas对象一样可以作为PIXI.BaseTexture的来源

// 想要绘制Canvas对象, 首先要创建Bitmap实例
const bitmap = new Bitmap(width, height);
// bitmap的canvas会在第一次引用的时候自动创建
Object.defineProperty(Bitmap.prototype, 'canvas', {
  get: function () {
    this._ensureCanvas();
    return this._canvas;
  },
  configurable: true,
});

Bitmap.prototype._ensureCanvas = function () {
  if (!this._canvas) {
    // 这里的_image是从Image.load方法加载后得到的
    // 当对图片有处理的时候, 比如对windowskin.png取色的时候
    // 需要把图片渲染到canvas上来操作
    if (this._image) {
      this._createCanvas(this._image.width, this._image.height);
      this._context.drawImage(this._image, 0, 0);
    // 否则就直接创建一个空窗口
    } else {
      this._createCanvas(0, 0);
    }
  }
};

// 创建Canvas和BaseTexture
Bitmap.prototype._createCanvas = function (width, height) {
  this._canvas = document.createElement('canvas');
  this._context = this._canvas.getContext('2d');
  this._canvas.width = width;
  this._canvas.height = height;
  // 这里会覆盖Image.load创建的BaseTexture
  this._createBaseTexture(this._canvas);
};

主线: 操作 Canvas

Bitmap提供了一系列canvas绘制方法,
这里简单得列举一些

// 渐变填涂矩形
Bitmap.prototype.gradientFillRect = function(
    x, y, width, height, color1, color2, vertical
) {
    const context = this.context;
    const x1 = vertical ? x : x + width;
    const y1 = vertical ? y + height : y;
    const grad = context.createLinearGradient(x, y, x1, y1);
    grad.addColorStop(0, color1);
    grad.addColorStop(1, color2);
    context.save(); // 保存当前画笔状态
    context.fillStyle = grad;
    context.fillRect(x, y, width, height);
    context.restore(); // 恢复画笔状态
    this._baseTexture.update(); // ※ 绘制完成后要更新BaseTexture
};

// 圆
Bitmap.prototype.drawCircle = function (x, y, radius, color) {
  const context = this.context;
  context.save();
  context.fillStyle = color;
  context.beginPath();
  context.arc(x, y, radius, 0, Math.PI * 2, false);
  context.fill();
  context.restore();
  this._baseTexture.update();
};

// 文字
Bitmap.prototype.drawText = function (text, x, y, maxWidth, lineHeight, align) {
  // [Note] Different browser makes different rendering with
  //   textBaseline == 'top'. So we use 'alphabetic' here.
  const context = this.context;
  const alpha = context.globalAlpha;
  maxWidth = maxWidth || 0xffffffff;
  let tx = x;
  let ty = Math.round(y + lineHeight / 2 + this.fontSize * 0.35);
  if (align === 'center') {
    tx += maxWidth / 2;
  }
  if (align === 'right') {
    tx += maxWidth;
  }
  context.save();
  context.font = this._makeFontNameText();
  context.textAlign = align;
  context.textBaseline = 'alphabetic';
  context.globalAlpha = 1;
  this._drawTextOutline(text, tx, ty, maxWidth);
  context.globalAlpha = alpha;
  this._drawTextBody(text, tx, ty, maxWidth);
  context.restore();
  this._baseTexture.update();
};

如果熟悉canvas的接口, 我们在这里可以比较自由得绘制任何内容.

支线: 图片缓存

Bitmap对象的管理是由ImageManager来处理的

// 尽管有很多诸如:
// ImageManager.loadTitle1
// ImageManager.loadSystem
// ImageManager.loadCharacter
// 等等加载方法, 实际上本质都是调用Bitmap.load
ImageManager.loadBitmapFromUrl = function(url) {
    // 注意, 这里通过判断是否有system路径来给图片分了2个不同的缓存池
    const cache = url.includes("/system/") ? this._system : this._cache;
    if (!cache[url]) {
        cache[url] = Bitmap.load(url);
    }
    return cache[url];
};

// 而它的清空方法仅清空._cache而不会清空._system
ImageManager.clear = function() {
    const cache = this._cache;
    for (const url in cache) {
        cache[url].destroy();
    }
    this._cache = {};
};

// 而清空缓存的场合仅有一处
// 也就是在切换地图的时候
// 说明这个缓存管理主要是用来处理地图图块缓存的问题的
Scene_Map.prototype.onTransfer = function() {
    ImageManager.clear();
    EffectManager.clear();
};

总结

image.png