PixiJS

Source: core/sprites/canvas/CanvasTinter.js

core/sprites/canvas/CanvasTinter.js

  1. import { hex2rgb, rgb2hex } from '../../utils';
  2. import canUseNewCanvasBlendModes from '../../renderers/canvas/utils/canUseNewCanvasBlendModes';
  3. //引入小程序补丁
  4. import { documentAlias, Image} from '@ali/pixi-miniprogram-adapter';
  5. /**
  6.  * Utility methods for Sprite/Texture tinting.
  7.  *
  8.  * @class
  9.  * @memberof PIXI
  10.  */
  11. const CanvasTinter = {
  12.     /**
  13.      * Basically this method just needs a sprite and a color and tints the sprite with the given color.
  14.      *
  15.      * @memberof PIXI.CanvasTinter
  16.      * @param {PIXI.Sprite} sprite - the sprite to tint
  17.      * @param {number} color - the color to use to tint the sprite with
  18.      * @return {HTMLCanvasElement} The tinted canvas
  19.      */
  20.     getTintedTexture: (sprite, color) =>
  21.     {
  22.         const texture = sprite._texture;
  24.         color = CanvasTinter.roundColor(color);
  26.         const stringColor = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`;
  28.         texture.tintCache = texture.tintCache || {};
  30.         const cachedTexture = texture.tintCache[stringColor];
  32.         let canvas;
  34.         if (cachedTexture)
  35.         {
  36.             if (cachedTexture.tintId === texture._updateID)
  37.             {
  38.                 return texture.tintCache[stringColor];
  39.             }
  41.             canvas = texture.tintCache[stringColor];
  42.         }
  43.         else
  44.         {
  45.             canvas = CanvasTinter.canvas || documentAlias.createElement('canvas');
  46.         }
  48.         CanvasTinter.tintMethod(texture, color, canvas);
  50.         canvas.tintId = texture._updateID;
  52.         if (CanvasTinter.convertTintToImage)
  53.         {
  54.             // is this better?
  55.             const tintImage = new Image();
  57.             tintImage.src = canvas.toDataURL();
  59.             texture.tintCache[stringColor] = tintImage;
  60.         }
  61.         else
  62.         {
  63.             texture.tintCache[stringColor] = canvas;
  64.             // if we are not converting the texture to an image then we need to lose the reference to the canvas
  65.             CanvasTinter.canvas = null;
  66.         }
  68.         return canvas;
  69.     },
  71.     /**
  72.      * Tint a texture using the 'multiply' operation.
  73.      *
  74.      * @memberof PIXI.CanvasTinter
  75.      * @param {PIXI.Texture} texture - the texture to tint
  76.      * @param {number} color - the color to use to tint the sprite with
  77.      * @param {HTMLCanvasElement} canvas - the current canvas
  78.      */
  79.     tintWithMultiply: (texture, color, canvas) =>
  80.     {
  81.         const context = canvas.getContext('2d');
  82.         const crop = texture._frame.clone();
  83.         const resolution = texture.baseTexture.resolution;
  85.         crop.x *= resolution;
  86.         crop.y *= resolution;
  87.         crop.width *= resolution;
  88.         crop.height *= resolution;
  90.         canvas.width = Math.ceil(crop.width);
  91.         canvas.height = Math.ceil(crop.height);
  93.         context.save();
  94.         context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`;
  96.         context.fillRect(0, 0, crop.width, crop.height);
  98.         context.globalCompositeOperation = 'multiply';
  100.         context.drawImage(
  101.             texture.baseTexture.source,
  102.             crop.x,
  103.             crop.y,
  104.             crop.width,
  105.             crop.height,
  106.             0,
  107.             0,
  108.             crop.width,
  109.             crop.height
  110.         );
  112.         context.globalCompositeOperation = 'destination-atop';
  114.         context.drawImage(
  115.             texture.baseTexture.source,
  116.             crop.x,
  117.             crop.y,
  118.             crop.width,
  119.             crop.height,
  120.             0,
  121.             0,
  122.             crop.width,
  123.             crop.height
  124.         );
  125.         context.restore();
  126.     },
  128.     /**
  129.      * Tint a texture using the 'overlay' operation.
  130.      *
  131.      * @memberof PIXI.CanvasTinter
  132.      * @param {PIXI.Texture} texture - the texture to tint
  133.      * @param {number} color - the color to use to tint the sprite with
  134.      * @param {HTMLCanvasElement} canvas - the current canvas
  135.      */
  136.     tintWithOverlay(texture, color, canvas)
  137.     {
  138.         const context = canvas.getContext('2d');
  139.         const crop = texture._frame.clone();
  140.         const resolution = texture.baseTexture.resolution;
  142.         crop.x *= resolution;
  143.         crop.y *= resolution;
  144.         crop.width *= resolution;
  145.         crop.height *= resolution;
  147.         canvas.width = Math.ceil(crop.width);
  148.         canvas.height = Math.ceil(crop.height);
  150.         context.save();
  151.         context.globalCompositeOperation = 'copy';
  152.         context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`;
  153.         context.fillRect(0, 0, crop.width, crop.height);
  155.         context.globalCompositeOperation = 'destination-atop';
  156.         context.drawImage(
  157.             texture.baseTexture.source,
  158.             crop.x,
  159.             crop.y,
  160.             crop.width,
  161.             crop.height,
  162.             0,
  163.             0,
  164.             crop.width,
  165.             crop.height
  166.         );
  168.         // context.globalCompositeOperation = 'copy';
  169.         context.restore();
  170.     },
  172.     /**
  173.      * Tint a texture pixel per pixel.
  174.      *
  175.      * @memberof PIXI.CanvasTinter
  176.      * @param {PIXI.Texture} texture - the texture to tint
  177.      * @param {number} color - the color to use to tint the sprite with
  178.      * @param {HTMLCanvasElement} canvas - the current canvas
  179.      */
  180.     tintWithPerPixel: (texture, color, canvas) =>
  181.     {
  182.         const context = canvas.getContext('2d');
  183.         const crop = texture._frame.clone();
  184.         const resolution = texture.baseTexture.resolution;
  186.         crop.x *= resolution;
  187.         crop.y *= resolution;
  188.         crop.width *= resolution;
  189.         crop.height *= resolution;
  191.         canvas.width = Math.ceil(crop.width);
  192.         canvas.height = Math.ceil(crop.height);
  194.         context.save();
  195.         context.globalCompositeOperation = 'copy';
  196.         context.drawImage(
  197.             texture.baseTexture.source,
  198.             crop.x,
  199.             crop.y,
  200.             crop.width,
  201.             crop.height,
  202.             0,
  203.             0,
  204.             crop.width,
  205.             crop.height
  206.         );
  207.         context.restore();
  209.         const rgbValues = hex2rgb(color);
  210.         const r = rgbValues[0];
  211.         const g = rgbValues[1];
  212.         const b = rgbValues[2];
  214.         const pixelData = context.getImageData(0, 0, crop.width, crop.height);
  216.         const pixels = pixelData.data;
  218.         for (let i = 0; i < pixels.length; i += 4)
  219.         {
  220.             pixels[i + 0] *= r;
  221.             pixels[i + 1] *= g;
  222.             pixels[i + 2] *= b;
  223.         }
  225.         context.putImageData(pixelData, 0, 0);
  226.     },
  228.     /**
  229.      * Rounds the specified color according to the CanvasTinter.cacheStepsPerColorChannel.
  230.      *
  231.      * @memberof PIXI.CanvasTinter
  232.      * @param {number} color - the color to round, should be a hex color
  233.      * @return {number} The rounded color.
  234.      */
  235.     roundColor: (color) =>
  236.     {
  237.         const step = CanvasTinter.cacheStepsPerColorChannel;
  239.         const rgbValues = hex2rgb(color);
  241.         rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
  242.         rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
  243.         rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
  245.         return rgb2hex(rgbValues);
  246.     },
  248.     /**
  249.      * Number of steps which will be used as a cap when rounding colors.
  250.      *
  251.      * @memberof PIXI.CanvasTinter
  252.      * @type {number}
  253.      */
  254.     cacheStepsPerColorChannel: 8,
  256.     /**
  257.      * Tint cache boolean flag.
  258.      *
  259.      * @memberof PIXI.CanvasTinter
  260.      * @type {boolean}
  261.      */
  262.     convertTintToImage: false,
  264.     /**
  265.      * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
  266.      *
  267.      * @memberof PIXI.CanvasTinter
  268.      * @type {boolean}
  269.      */
  270.     canUseMultiply: canUseNewCanvasBlendModes(),
  272.     /**
  273.      * The tinting method that will be used.
  274.      *
  275.      * @memberof PIXI.CanvasTinter
  276.      * @type {tintMethodFunctionType}
  277.      */
  278.     tintMethod: 0,
  279. };
  281. CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel;
  283. /**
  284.  * The tintMethod type.
  285.  *
  286.  * @memberof PIXI.CanvasTinter
  287.  * @callback tintMethodFunctionType
  288.  * @param texture {PIXI.Texture} the texture to tint
  289.  * @param color {number} the color to use to tint the sprite with
  290.  * @param canvas {HTMLCanvasElement} the current canvas
  291.  */
  293. export default CanvasTinter;