Source: prepare/canvas/CanvasPrepare.js

prepare/canvas/CanvasPrepare.js

  1. import * as core from '../../core';
  2. import BasePrepare from '../BasePrepare';
  3. //引入小程序补丁
  4. import { documentAlias } from '@ali/pixi-miniprogram-adapter';
  5. const CANVAS_START_SIZE = 16;
  6. /**
  7. * The prepare manager provides functionality to upload content to the GPU
  8. * This cannot be done directly for Canvas like in WebGL, but the effect can be achieved by drawing
  9. * textures to an offline canvas.
  10. * This draw call will force the texture to be moved onto the GPU.
  11. *
  12. * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare
  13. *
  14. * @class
  15. * @extends PIXI.prepare.BasePrepare
  16. * @memberof PIXI.prepare
  17. */
  18. export default class CanvasPrepare extends BasePrepare
  19. {
  20. /**
  21. * @param {PIXI.CanvasRenderer} renderer - A reference to the current renderer
  22. */
  23. constructor(renderer)
  24. {
  25. super(renderer);
  26. this.uploadHookHelper = this;
  27. /**
  28. * An offline canvas to render textures to
  29. * @type {HTMLCanvasElement}
  30. * @private
  31. */
  32. this.canvas = documentAlias.createElement('canvas');
  33. this.canvas.width = CANVAS_START_SIZE;
  34. this.canvas.height = CANVAS_START_SIZE;
  35. /**
  36. * The context to the canvas
  37. * @type {CanvasRenderingContext2D}
  38. * @private
  39. */
  40. this.ctx = this.canvas.getContext('2d');
  41. // Add textures to upload
  42. this.registerUploadHook(uploadBaseTextures);
  43. }
  44. /**
  45. * Destroys the plugin, don't use after this.
  46. *
  47. */
  48. destroy()
  49. {
  50. super.destroy();
  51. this.ctx = null;
  52. this.canvas = null;
  53. }
  54. }
  55. /**
  56. * Built-in hook to upload PIXI.Texture objects to the GPU.
  57. *
  58. * @private
  59. * @param {*} prepare - Instance of CanvasPrepare
  60. * @param {*} item - Item to check
  61. * @return {boolean} If item was uploaded.
  62. */
  63. function uploadBaseTextures(prepare, item)
  64. {
  65. if (item instanceof core.BaseTexture)
  66. {
  67. const image = item.source;
  68. // Sometimes images (like atlas images) report a size of zero, causing errors on windows phone.
  69. // So if the width or height is equal to zero then use the canvas size
  70. // Otherwise use whatever is smaller, the image dimensions or the canvas dimensions.
  71. const imageWidth = image.width === 0 ? prepare.canvas.width : Math.min(prepare.canvas.width, image.width);
  72. const imageHeight = image.height === 0 ? prepare.canvas.height : Math.min(prepare.canvas.height, image.height);
  73. // Only a small subsections is required to be drawn to have the whole texture uploaded to the GPU
  74. // A smaller draw can be faster.
  75. prepare.ctx.drawImage(image, 0, 0, imageWidth, imageHeight, 0, 0, prepare.canvas.width, prepare.canvas.height);
  76. return true;
  77. }
  78. return false;
  79. }
  80. core.CanvasRenderer.registerPlugin('prepare', CanvasPrepare);