@pixi/canvas-renderer - npm Package Compare versions

Comparing version 5.0.0-rc to 5.0.0-rc.2

lib/canvas-renderer.es.js

 /*!
- * @pixi/canvas-renderer - v5.0.0-rc
- * Compiled Fri, 01 Feb 2019 04:50:10 UTC
+ * @pixi/canvas-renderer - v5.0.0-rc.2
+ * Compiled Mon, 18 Feb 2019 23:45:28 UTC
  *
@@ -9,3 +9,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
 import { AbstractRenderer, Renderer, BaseTexture } from '@pixi/core';
-import { CanvasRenderTarget, sayHello, isWebGLSupported } from '@pixi/utils';
+import { CanvasRenderTarget, sayHello, isWebGLSupported, hex2rgb, rgb2hex } from '@pixi/utils';
 import { SHAPES } from '@pixi/math';
@@ -512,8 +512,2 @@ import { BLEND_MODES, SCALE_MODES, RENDERER_TYPE } from '@pixi/constants';
 
-        if (navigator.isCocoonJS && this.view.screencanvas)
-        {
-            context.fillStyle = 'black';
-            context.clear();
-        }
-
         if (clear !== undefined ? clear : this.clearBeforeRender)
@@ -693,3 +687,3 @@ {
  *   resolutions other than 1
- * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment)
+ * @param {boolean} [options.antialias=false] - sets antialias
  * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you
@@ -728,2 +722,283 @@ *  need to call toDataUrl on the webgl context
 /**
+ * Utility methods for Sprite/Texture tinting.
+ *
+ * Tinting with the CanvasRenderer involves creating a new canvas to use as a texture,
+ * so be aware of the performance implications.
+ *
+ * @class
+ * @memberof PIXI
+ */
+var CanvasTinter = {
+    /**
+     * Basically this method just needs a sprite and a color and tints the sprite with the given color.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Sprite} sprite - the sprite to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @return {HTMLCanvasElement} The tinted canvas
+     */
+    getTintedCanvas: function (sprite, color) {
+        var texture = sprite._texture;
+
+        color = CanvasTinter.roundColor(color);
+
+        var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+
+        texture.tintCache = texture.tintCache || {};
+
+        var cachedCanvas = texture.tintCache[stringColor];
+
+        var canvas;
+
+        if (cachedCanvas)
+        {
+            if (cachedCanvas.tintId === texture._updateID)
+            {
+                return texture.tintCache[stringColor];
+            }
+
+            canvas = texture.tintCache[stringColor];
+        }
+        else
+        {
+            canvas = CanvasTinter.canvas || document.createElement('canvas');
+        }
+
+        CanvasTinter.tintMethod(texture, color, canvas);
+
+        canvas.tintId = texture._updateID;
+
+        if (CanvasTinter.convertTintToImage)
+        {
+            // is this better?
+            var tintImage = new Image();
+
+            tintImage.src = canvas.toDataURL();
+
+            texture.tintCache[stringColor] = tintImage;
+        }
+        else
+        {
+            texture.tintCache[stringColor] = canvas;
+            // if we are not converting the texture to an image then we need to lose the reference to the canvas
+            CanvasTinter.canvas = null;
+        }
+
+        return canvas;
+    },
+
+    /**
+     * Tint a texture using the 'multiply' operation.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithMultiply: function (texture, color, canvas) {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.fillStyle = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+
+        context.fillRect(0, 0, crop.width, crop.height);
+
+        context.globalCompositeOperation = 'multiply';
+
+        var source = texture.baseTexture.getDrawableSource();
+
+        context.drawImage(
+            source,
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+
+        context.globalCompositeOperation = 'destination-atop';
+
+        context.drawImage(
+            source,
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+        context.restore();
+    },
+
+    /**
+     * Tint a texture using the 'overlay' operation.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithOverlay: function tintWithOverlay(texture, color, canvas)
+    {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.globalCompositeOperation = 'copy';
+        context.fillStyle = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+        context.fillRect(0, 0, crop.width, crop.height);
+
+        context.globalCompositeOperation = 'destination-atop';
+        context.drawImage(
+            texture.baseTexture.getDrawableSource(),
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+
+        // context.globalCompositeOperation = 'copy';
+        context.restore();
+    },
+
+    /**
+     * Tint a texture pixel per pixel.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithPerPixel: function (texture, color, canvas) {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.globalCompositeOperation = 'copy';
+        context.drawImage(
+            texture.baseTexture.getDrawableSource(),
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+        context.restore();
+
+        var rgbValues = hex2rgb(color);
+        var r = rgbValues[0];
+        var g = rgbValues[1];
+        var b = rgbValues[2];
+
+        var pixelData = context.getImageData(0, 0, crop.width, crop.height);
+
+        var pixels = pixelData.data;
+
+        for (var i = 0; i < pixels.length; i += 4)
+        {
+            pixels[i + 0] *= r;
+            pixels[i + 1] *= g;
+            pixels[i + 2] *= b;
+        }
+
+        context.putImageData(pixelData, 0, 0);
+    },
+
+    /**
+     * Rounds the specified color according to the CanvasTinter.cacheStepsPerColorChannel.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {number} color - the color to round, should be a hex color
+     * @return {number} The rounded color.
+     */
+    roundColor: function (color) {
+        var step = CanvasTinter.cacheStepsPerColorChannel;
+
+        var rgbValues = hex2rgb(color);
+
+        rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
+        rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
+        rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
+
+        return rgb2hex(rgbValues);
+    },
+
+    /**
+     * Number of steps which will be used as a cap when rounding colors.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {number}
+     */
+    cacheStepsPerColorChannel: 8,
+
+    /**
+     * Tint cache boolean flag.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {boolean}
+     */
+    convertTintToImage: false,
+
+    /**
+     * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {boolean}
+     */
+    canUseMultiply: canUseNewCanvasBlendModes(),
+
+    /**
+     * The tinting method that will be used.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {Function}
+     */
+    tintMethod: function () { // jslint-disable no-empty-function
+
+    },
+};
+
+CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel;
+
+/**
  * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable
@@ -742,3 +1017,3 @@ * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package.
 
-export { CanvasRenderer, canUseNewCanvasBlendModes, autoDetectRenderer };
+export { CanvasRenderer, canUseNewCanvasBlendModes, autoDetectRenderer, CanvasTinter };
 //# sourceMappingURL=canvas-renderer.es.js.map

lib/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.0.0-rc
- * Compiled Fri, 01 Feb 2019 04:50:10 UTC
+ * @pixi/canvas-renderer - v5.0.0-rc.2
+ * Compiled Mon, 18 Feb 2019 23:45:28 UTC
  *
@@ -515,8 +515,2 @@ * @pixi/canvas-renderer is licensed under the MIT License.
 
-        if (navigator.isCocoonJS && this.view.screencanvas)
-        {
-            context.fillStyle = 'black';
-            context.clear();
-        }
-
         if (clear !== undefined ? clear : this.clearBeforeRender)
@@ -696,3 +690,3 @@ {
  *   resolutions other than 1
- * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment)
+ * @param {boolean} [options.antialias=false] - sets antialias
  * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you
@@ -731,2 +725,283 @@ *  need to call toDataUrl on the webgl context
 /**
+ * Utility methods for Sprite/Texture tinting.
+ *
+ * Tinting with the CanvasRenderer involves creating a new canvas to use as a texture,
+ * so be aware of the performance implications.
+ *
+ * @class
+ * @memberof PIXI
+ */
+var CanvasTinter = {
+    /**
+     * Basically this method just needs a sprite and a color and tints the sprite with the given color.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Sprite} sprite - the sprite to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @return {HTMLCanvasElement} The tinted canvas
+     */
+    getTintedCanvas: function (sprite, color) {
+        var texture = sprite._texture;
+
+        color = CanvasTinter.roundColor(color);
+
+        var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+
+        texture.tintCache = texture.tintCache || {};
+
+        var cachedCanvas = texture.tintCache[stringColor];
+
+        var canvas;
+
+        if (cachedCanvas)
+        {
+            if (cachedCanvas.tintId === texture._updateID)
+            {
+                return texture.tintCache[stringColor];
+            }
+
+            canvas = texture.tintCache[stringColor];
+        }
+        else
+        {
+            canvas = CanvasTinter.canvas || document.createElement('canvas');
+        }
+
+        CanvasTinter.tintMethod(texture, color, canvas);
+
+        canvas.tintId = texture._updateID;
+
+        if (CanvasTinter.convertTintToImage)
+        {
+            // is this better?
+            var tintImage = new Image();
+
+            tintImage.src = canvas.toDataURL();
+
+            texture.tintCache[stringColor] = tintImage;
+        }
+        else
+        {
+            texture.tintCache[stringColor] = canvas;
+            // if we are not converting the texture to an image then we need to lose the reference to the canvas
+            CanvasTinter.canvas = null;
+        }
+
+        return canvas;
+    },
+
+    /**
+     * Tint a texture using the 'multiply' operation.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithMultiply: function (texture, color, canvas) {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.fillStyle = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+
+        context.fillRect(0, 0, crop.width, crop.height);
+
+        context.globalCompositeOperation = 'multiply';
+
+        var source = texture.baseTexture.getDrawableSource();
+
+        context.drawImage(
+            source,
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+
+        context.globalCompositeOperation = 'destination-atop';
+
+        context.drawImage(
+            source,
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+        context.restore();
+    },
+
+    /**
+     * Tint a texture using the 'overlay' operation.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithOverlay: function tintWithOverlay(texture, color, canvas)
+    {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.globalCompositeOperation = 'copy';
+        context.fillStyle = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
+        context.fillRect(0, 0, crop.width, crop.height);
+
+        context.globalCompositeOperation = 'destination-atop';
+        context.drawImage(
+            texture.baseTexture.getDrawableSource(),
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+
+        // context.globalCompositeOperation = 'copy';
+        context.restore();
+    },
+
+    /**
+     * Tint a texture pixel per pixel.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {PIXI.Texture} texture - the texture to tint
+     * @param {number} color - the color to use to tint the sprite with
+     * @param {HTMLCanvasElement} canvas - the current canvas
+     */
+    tintWithPerPixel: function (texture, color, canvas) {
+        var context = canvas.getContext('2d');
+        var crop = texture._frame.clone();
+        var resolution = texture.baseTexture.resolution;
+
+        crop.x *= resolution;
+        crop.y *= resolution;
+        crop.width *= resolution;
+        crop.height *= resolution;
+
+        canvas.width = Math.ceil(crop.width);
+        canvas.height = Math.ceil(crop.height);
+
+        context.save();
+        context.globalCompositeOperation = 'copy';
+        context.drawImage(
+            texture.baseTexture.getDrawableSource(),
+            crop.x,
+            crop.y,
+            crop.width,
+            crop.height,
+            0,
+            0,
+            crop.width,
+            crop.height
+        );
+        context.restore();
+
+        var rgbValues = utils.hex2rgb(color);
+        var r = rgbValues[0];
+        var g = rgbValues[1];
+        var b = rgbValues[2];
+
+        var pixelData = context.getImageData(0, 0, crop.width, crop.height);
+
+        var pixels = pixelData.data;
+
+        for (var i = 0; i < pixels.length; i += 4)
+        {
+            pixels[i + 0] *= r;
+            pixels[i + 1] *= g;
+            pixels[i + 2] *= b;
+        }
+
+        context.putImageData(pixelData, 0, 0);
+    },
+
+    /**
+     * Rounds the specified color according to the CanvasTinter.cacheStepsPerColorChannel.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @param {number} color - the color to round, should be a hex color
+     * @return {number} The rounded color.
+     */
+    roundColor: function (color) {
+        var step = CanvasTinter.cacheStepsPerColorChannel;
+
+        var rgbValues = utils.hex2rgb(color);
+
+        rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
+        rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
+        rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
+
+        return utils.rgb2hex(rgbValues);
+    },
+
+    /**
+     * Number of steps which will be used as a cap when rounding colors.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {number}
+     */
+    cacheStepsPerColorChannel: 8,
+
+    /**
+     * Tint cache boolean flag.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {boolean}
+     */
+    convertTintToImage: false,
+
+    /**
+     * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {boolean}
+     */
+    canUseMultiply: canUseNewCanvasBlendModes(),
+
+    /**
+     * The tinting method that will be used.
+     *
+     * @memberof PIXI.CanvasTinter
+     * @type {Function}
+     */
+    tintMethod: function () { // jslint-disable no-empty-function
+
+    },
+};
+
+CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel;
+
+/**
  * Get the drawable source, such as HTMLCanvasElement or HTMLImageElement suitable
@@ -748,2 +1023,3 @@ * for rendering with CanvasRenderer. Provided by **@pixi/canvas-renderer** package.
 exports.autoDetectRenderer = autoDetectRenderer;
+exports.CanvasTinter = CanvasTinter;
 //# sourceMappingURL=canvas-renderer.js.map

package.json

 {
   "name": "@pixi/canvas-renderer",
-  "version": "5.0.0-rc",
+  "version": "5.0.0-rc.2",
   "main": "lib/canvas-renderer.js",
@@ -28,7 +28,7 @@ "module": "lib/canvas-renderer.es.js",
   "dependencies": {
-    "@pixi/constants": "^5.0.0-rc",
-    "@pixi/core": "^5.0.0-rc",
-    "@pixi/math": "^5.0.0-rc",
-    "@pixi/settings": "^5.0.0-rc",
-    "@pixi/utils": "^5.0.0-rc"
+    "@pixi/constants": "^5.0.0-rc.2",
+    "@pixi/core": "^5.0.0-rc.2",
+    "@pixi/math": "^5.0.0-rc.2",
+    "@pixi/settings": "^5.0.0-rc.2",
+    "@pixi/utils": "^5.0.0-rc.2"
   },
@@ -38,3 +38,3 @@ "devDependencies": {
   },
-  "gitHead": "9026a1bbca9a9d86b7a3b6d5eb4fa2c3145c2b85"
+  "gitHead": "53b354f4e01d3baee7223756dd09a3163ad29d0f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

177065

increased by32.34%

Lines of code

1723

increased by35.88%

Dependency changes

• Updated@pixi/constants@^5.0.0-rc.2

• Updated@pixi/core@^5.0.0-rc.2

• Updated@pixi/math@^5.0.0-rc.2

• Updated@pixi/settings@^5.0.0-rc.2

• Updated@pixi/utils@^5.0.0-rc.2