@pixi/canvas-sprite
Advanced tools
Comparing version 5.0.0-rc to 5.0.0-rc.2
/*! | ||
* @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 |
/*! | ||
* @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 |
{ | ||
"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" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
37019
416
Updated@pixi/constants@^5.0.0-rc.2
Updated@pixi/math@^5.0.0-rc.2
Updated@pixi/sprite@^5.0.0-rc.2
Updated@pixi/utils@^5.0.0-rc.2