New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@pixi/canvas-sprite

Package Overview
Dependencies
Maintainers
3
Versions
121
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pixi/canvas-sprite - npm Package Compare versions

Comparing version 5.0.0-rc to 5.0.0-rc.2

312

lib/canvas-sprite.es.js
/*!
* @pixi/canvas-sprite - v5.0.0-rc
* Compiled Fri, 01 Feb 2019 04:50:10 UTC
* @pixi/canvas-sprite - v5.0.0-rc.2
* Compiled Mon, 18 Feb 2019 23:45:28 UTC
*

@@ -10,287 +10,5 @@ * @pixi/canvas-sprite is licensed under the MIT License.

import { Matrix, GroupD8 } from '@pixi/math';
import { hex2rgb, rgb2hex } from '@pixi/utils';
import { canUseNewCanvasBlendModes } from '@pixi/canvas-renderer';
import { CanvasTinter } from '@pixi/canvas-renderer';
import { Sprite } from '@pixi/sprite';
/**
* 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
*/
getTintedTexture: 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 cachedTexture = texture.tintCache[stringColor];
var canvas;
if (cachedTexture)
{
if (cachedTexture.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;
var canvasRenderWorldTransform = new Matrix();

@@ -438,8 +156,8 @@

{
if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID)
if (sprite._cachedTint !== sprite.tint || sprite._tintedCanvas.tintId !== sprite._texture._updateID)
{
sprite.cachedTint = sprite.tint;
sprite._cachedTint = sprite.tint;
// TODO clean up caching - how to clean up the caches?
sprite.tintedTexture = CanvasTinter.getTintedTexture(sprite, sprite.tint);
sprite._tintedCanvas = CanvasTinter.getTintedCanvas(sprite, sprite.tint);
}

@@ -492,2 +210,18 @@

/**
* Cached tinted texture.
* @memberof PIXI.Sprite#
* @member {HTMLCanvasElement} _tintedCanvas
* @protected
*/
Sprite.prototype._tintedCanvas = null;
/**
* Cached tint value so we can tell when the tint is changed.
* @memberof PIXI.Sprite#
* @member {number} _cachedTint
* @protected
*/
Sprite.prototype._cachedTint = 0xFFFFFF;
/**
* Renders the object using the Canvas renderer

@@ -505,3 +239,3 @@ *

export { CanvasSpriteRenderer, CanvasTinter };
export { CanvasSpriteRenderer };
//# sourceMappingURL=canvas-sprite.es.js.map

309

lib/canvas-sprite.js
/*!
* @pixi/canvas-sprite - v5.0.0-rc
* Compiled Fri, 01 Feb 2019 04:50:10 UTC
* @pixi/canvas-sprite - v5.0.0-rc.2
* Compiled Mon, 18 Feb 2019 23:45:28 UTC
*

@@ -14,287 +14,5 @@ * @pixi/canvas-sprite is licensed under the MIT License.

var math = require('@pixi/math');
var utils = require('@pixi/utils');
var canvasRenderer = require('@pixi/canvas-renderer');
var sprite = require('@pixi/sprite');
/**
* 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
*/
getTintedTexture: function (sprite$$1, color) {
var texture = sprite$$1._texture;
color = CanvasTinter.roundColor(color);
var stringColor = "#" + ((("00000" + ((color | 0).toString(16)))).substr(-6));
texture.tintCache = texture.tintCache || {};
var cachedTexture = texture.tintCache[stringColor];
var canvas;
if (cachedTexture)
{
if (cachedTexture.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: canvasRenderer.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;
var canvasRenderWorldTransform = new math.Matrix();

@@ -442,8 +160,8 @@

{
if (sprite$$1.cachedTint !== sprite$$1.tint || sprite$$1.tintedTexture.tintId !== sprite$$1._texture._updateID)
if (sprite$$1._cachedTint !== sprite$$1.tint || sprite$$1._tintedCanvas.tintId !== sprite$$1._texture._updateID)
{
sprite$$1.cachedTint = sprite$$1.tint;
sprite$$1._cachedTint = sprite$$1.tint;
// TODO clean up caching - how to clean up the caches?
sprite$$1.tintedTexture = CanvasTinter.getTintedTexture(sprite$$1, sprite$$1.tint);
sprite$$1._tintedCanvas = canvasRenderer.CanvasTinter.getTintedCanvas(sprite$$1, sprite$$1.tint);
}

@@ -496,2 +214,18 @@

/**
* Cached tinted texture.
* @memberof PIXI.Sprite#
* @member {HTMLCanvasElement} _tintedCanvas
* @protected
*/
sprite.Sprite.prototype._tintedCanvas = null;
/**
* Cached tint value so we can tell when the tint is changed.
* @memberof PIXI.Sprite#
* @member {number} _cachedTint
* @protected
*/
sprite.Sprite.prototype._cachedTint = 0xFFFFFF;
/**
* Renders the object using the Canvas renderer

@@ -510,3 +244,2 @@ *

exports.CanvasSpriteRenderer = CanvasSpriteRenderer;
exports.CanvasTinter = CanvasTinter;
//# sourceMappingURL=canvas-sprite.js.map

14

package.json
{
"name": "@pixi/canvas-sprite",
"version": "5.0.0-rc",
"version": "5.0.0-rc.2",
"main": "lib/canvas-sprite.js",

@@ -25,7 +25,7 @@ "module": "lib/canvas-sprite.es.js",

"dependencies": {
"@pixi/canvas-renderer": "^5.0.0-rc",
"@pixi/constants": "^5.0.0-rc",
"@pixi/math": "^5.0.0-rc",
"@pixi/sprite": "^5.0.0-rc",
"@pixi/utils": "^5.0.0-rc"
"@pixi/canvas-renderer": "^5.0.0-rc.2",
"@pixi/constants": "^5.0.0-rc.2",
"@pixi/math": "^5.0.0-rc.2",
"@pixi/sprite": "^5.0.0-rc.2",
"@pixi/utils": "^5.0.0-rc.2"
},

@@ -35,3 +35,3 @@ "devDependencies": {

},
"gitHead": "9026a1bbca9a9d86b7a3b6d5eb4fa2c3145c2b85"
"gitHead": "53b354f4e01d3baee7223756dd09a3163ad29d0f"
}
lib/canvas-sprite.es.js.map

Sorry, the diff of this file is not supported yet

lib/canvas-sprite.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc