@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
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