diff --git a/src/core/text/Text.js b/src/core/text/Text.js index f876593..15879ca 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,6 +6,7 @@ import { TEXT_GRADIENT } from '../const'; import settings from '../settings'; import TextStyle from './TextStyle'; +import trimCanvas from '../utils/trimCanvas'; const defaultDestroyOptions = { texture: true, @@ -328,11 +329,11 @@ { if (this._style.trim) { - const trimmed = this.getTrimmed(this.canvas); + const trimmed = trimCanvas(this.canvas); - this.canvas.width = trimmed.trimWidth; - this.canvas.height = trimmed.trimHeight; - this.context.putImageData(trimmed.trimmed, 0, 0); + this.canvas.width = trimmed.width; + this.canvas.height = trimmed.height; + this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; @@ -363,79 +364,6 @@ } /** - * Get trimmed transparent borders - * - * @private - * @returns {object} Trim data - */ - getTrimmed() - { - // https://gist.github.com/remy/784508 - const pixels = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height); - const l = pixels.data.length; - const bound = { - top: null, - left: null, - right: null, - bottom: null, - }; - let i; - let x; - let y; - - for (i = 0; i < l; i += 4) - { - if (pixels.data[i + 3] !== 0) - { - x = (i / 4) % this.canvas.width; - y = ~~((i / 4) / this.canvas.width); - - if (bound.top === null) - { - bound.top = y; - } - - if (bound.left === null) - { - bound.left = x; - } - else if (x < bound.left) - { - bound.left = x; - } - - if (bound.right === null) - { - bound.right = x + 1; - } - else if (bound.right < x) - { - bound.right = x + 1; - } - - if (bound.bottom === null) - { - bound.bottom = y; - } - else if (bound.bottom < y) - { - bound.bottom = y; - } - } - } - - const trimHeight = bound.bottom - bound.top + 1; - const trimWidth = bound.right - bound.left; - const trimmed = this.context.getImageData(bound.left, bound.top, trimWidth, trimHeight); - - return { - trimHeight, - trimWidth, - trimmed, - }; - } - - /** * Renders the object using the WebGL renderer * * @param {PIXI.WebGLRenderer} renderer - The renderer diff --git a/src/core/text/Text.js b/src/core/text/Text.js index f876593..15879ca 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,6 +6,7 @@ import { TEXT_GRADIENT } from '../const'; import settings from '../settings'; import TextStyle from './TextStyle'; +import trimCanvas from '../utils/trimCanvas'; const defaultDestroyOptions = { texture: true, @@ -328,11 +329,11 @@ { if (this._style.trim) { - const trimmed = this.getTrimmed(this.canvas); + const trimmed = trimCanvas(this.canvas); - this.canvas.width = trimmed.trimWidth; - this.canvas.height = trimmed.trimHeight; - this.context.putImageData(trimmed.trimmed, 0, 0); + this.canvas.width = trimmed.width; + this.canvas.height = trimmed.height; + this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; @@ -363,79 +364,6 @@ } /** - * Get trimmed transparent borders - * - * @private - * @returns {object} Trim data - */ - getTrimmed() - { - // https://gist.github.com/remy/784508 - const pixels = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height); - const l = pixels.data.length; - const bound = { - top: null, - left: null, - right: null, - bottom: null, - }; - let i; - let x; - let y; - - for (i = 0; i < l; i += 4) - { - if (pixels.data[i + 3] !== 0) - { - x = (i / 4) % this.canvas.width; - y = ~~((i / 4) / this.canvas.width); - - if (bound.top === null) - { - bound.top = y; - } - - if (bound.left === null) - { - bound.left = x; - } - else if (x < bound.left) - { - bound.left = x; - } - - if (bound.right === null) - { - bound.right = x + 1; - } - else if (bound.right < x) - { - bound.right = x + 1; - } - - if (bound.bottom === null) - { - bound.bottom = y; - } - else if (bound.bottom < y) - { - bound.bottom = y; - } - } - } - - const trimHeight = bound.bottom - bound.top + 1; - const trimWidth = bound.right - bound.left; - const trimmed = this.context.getImageData(bound.left, bound.top, trimWidth, trimHeight); - - return { - trimHeight, - trimWidth, - trimmed, - }; - } - - /** * Renders the object using the WebGL renderer * * @param {PIXI.WebGLRenderer} renderer - The renderer diff --git a/src/core/utils/trimCanvas.js b/src/core/utils/trimCanvas.js new file mode 100644 index 0000000..37a0378 --- /dev/null +++ b/src/core/utils/trimCanvas.js @@ -0,0 +1,76 @@ +/** + * Trim transparent borders from a canvas + * + * @memberof PIXI + * @function trimCanvas + * @private + * @param {HTMLCanvasElement} canvas - the canvas to trim + * @returns {object} Trim data + */ +export default function trimCanvas(canvas) +{ + // https://gist.github.com/remy/784508 + const context = canvas.getContext('2d'); + const pixels = context.getImageData(0, 0, canvas.width, canvas.height); + const l = pixels.data.length; + const bound = { + top: null, + left: null, + right: null, + bottom: null, + }; + let i; + let x; + let y; + + for (i = 0; i < l; i += 4) + { + if (pixels.data[i + 3] !== 0) + { + x = (i / 4) % canvas.width; + y = ~~((i / 4) / canvas.width); + + if (bound.top === null) + { + bound.top = y; + } + + if (bound.left === null) + { + bound.left = x; + } + else if (x < bound.left) + { + bound.left = x; + } + + if (bound.right === null) + { + bound.right = x + 1; + } + else if (bound.right < x) + { + bound.right = x + 1; + } + + if (bound.bottom === null) + { + bound.bottom = y; + } + else if (bound.bottom < y) + { + bound.bottom = y; + } + } + } + + const height = bound.bottom - bound.top + 1; + const width = bound.right - bound.left; + const data = context.getImageData(bound.left, bound.top, width, height); + + return { + height, + width, + data, + }; +}