diff --git a/packages/text/package.json b/packages/text/package.json index 35bbf56..e0c26fa 100644 --- a/packages/text/package.json +++ b/packages/text/package.json @@ -32,6 +32,9 @@ "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { + "@pixi/canvas-display": "^5.0.0-alpha.3", + "@pixi/canvas-renderer": "^5.0.0-alpha.3", + "@pixi/canvas-sprite": "^5.0.0-alpha.3", "floss": "^2.1.3" } } diff --git a/packages/text/package.json b/packages/text/package.json index 35bbf56..e0c26fa 100644 --- a/packages/text/package.json +++ b/packages/text/package.json @@ -32,6 +32,9 @@ "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { + "@pixi/canvas-display": "^5.0.0-alpha.3", + "@pixi/canvas-renderer": "^5.0.0-alpha.3", + "@pixi/canvas-sprite": "^5.0.0-alpha.3", "floss": "^2.1.3" } } diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index 844252c..d142e09 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -64,11 +64,13 @@ this.context = this.canvas.getContext('2d'); /** - * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer. + * The resolution / device pixel ratio of the canvas. + * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually. * @member {number} * @default 1 */ - this.resolution = settings.RESOLUTION; + this._resolution = settings.RESOLUTION; + this._autoResolution = true; /** * Private tracker for the current text. @@ -141,10 +143,10 @@ const maxLineWidth = measured.maxLineWidth; const fontProperties = measured.fontProperties; - this.canvas.width = Math.ceil((Math.max(1, width) + (style.padding * 2)) * this.resolution); - this.canvas.height = Math.ceil((Math.max(1, height) + (style.padding * 2)) * this.resolution); + this.canvas.width = Math.ceil((Math.max(1, width) + (style.padding * 2)) * this._resolution); + this.canvas.height = Math.ceil((Math.max(1, height) + (style.padding * 2)) * this._resolution); - context.scale(this.resolution, this.resolution); + context.scale(this._resolution, this._resolution); context.clearRect(0, 0, this.canvas.width, this.canvas.height); @@ -328,8 +330,8 @@ const padding = style.trim ? 0 : style.padding; const baseTexture = texture.baseTexture; - texture.trim.width = texture._frame.width = canvas.width / this.resolution; - texture.trim.height = texture._frame.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this._resolution; + texture.trim.height = texture._frame.height = canvas.height / this._resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -339,7 +341,7 @@ // call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - baseTexture.setRealSize(canvas.width, canvas.height, this.resolution); + baseTexture.setRealSize(canvas.width, canvas.height, this._resolution); this.dirty = false; } @@ -351,9 +353,9 @@ */ render(renderer) { - if (this.resolution !== renderer.resolution) + if (this._autoResolution && this._resolution !== renderer.resolution) { - this.resolution = renderer.resolution; + this._resolution = renderer.resolution; this.dirty = true; } @@ -370,9 +372,9 @@ */ _renderCanvas(renderer) { - if (this.resolution !== renderer.resolution) + if (this._autoResolution && this._resolution !== renderer.resolution) { - this.resolution = renderer.resolution; + this._resolution = renderer.resolution; this.dirty = true; } @@ -442,8 +444,8 @@ let currentIteration; let stop; - const width = this.canvas.width / this.resolution; - const height = this.canvas.height / this.resolution; + const width = this.canvas.width / this._resolution; + const height = this.canvas.height / this._resolution; // make a copy of the style settings, so we can manipulate them later const fill = style.fill.slice(); @@ -646,4 +648,28 @@ this._text = text; this.dirty = true; } + + /** + * The resolution / device pixel ratio of the canvas. + * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually. + * @member {number} + * @default 1 + */ + get resolution() + { + return this._resolution; + } + + set resolution(value) // eslint-disable-line require-jsdoc + { + this._autoResolution = false; + + if (this._resolution === value) + { + return; + } + + this._resolution = value; + this.dirty = true; + } } diff --git a/packages/text/package.json b/packages/text/package.json index 35bbf56..e0c26fa 100644 --- a/packages/text/package.json +++ b/packages/text/package.json @@ -32,6 +32,9 @@ "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { + "@pixi/canvas-display": "^5.0.0-alpha.3", + "@pixi/canvas-renderer": "^5.0.0-alpha.3", + "@pixi/canvas-sprite": "^5.0.0-alpha.3", "floss": "^2.1.3" } } diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index 844252c..d142e09 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -64,11 +64,13 @@ this.context = this.canvas.getContext('2d'); /** - * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer. + * The resolution / device pixel ratio of the canvas. + * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually. * @member {number} * @default 1 */ - this.resolution = settings.RESOLUTION; + this._resolution = settings.RESOLUTION; + this._autoResolution = true; /** * Private tracker for the current text. @@ -141,10 +143,10 @@ const maxLineWidth = measured.maxLineWidth; const fontProperties = measured.fontProperties; - this.canvas.width = Math.ceil((Math.max(1, width) + (style.padding * 2)) * this.resolution); - this.canvas.height = Math.ceil((Math.max(1, height) + (style.padding * 2)) * this.resolution); + this.canvas.width = Math.ceil((Math.max(1, width) + (style.padding * 2)) * this._resolution); + this.canvas.height = Math.ceil((Math.max(1, height) + (style.padding * 2)) * this._resolution); - context.scale(this.resolution, this.resolution); + context.scale(this._resolution, this._resolution); context.clearRect(0, 0, this.canvas.width, this.canvas.height); @@ -328,8 +330,8 @@ const padding = style.trim ? 0 : style.padding; const baseTexture = texture.baseTexture; - texture.trim.width = texture._frame.width = canvas.width / this.resolution; - texture.trim.height = texture._frame.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this._resolution; + texture.trim.height = texture._frame.height = canvas.height / this._resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -339,7 +341,7 @@ // call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - baseTexture.setRealSize(canvas.width, canvas.height, this.resolution); + baseTexture.setRealSize(canvas.width, canvas.height, this._resolution); this.dirty = false; } @@ -351,9 +353,9 @@ */ render(renderer) { - if (this.resolution !== renderer.resolution) + if (this._autoResolution && this._resolution !== renderer.resolution) { - this.resolution = renderer.resolution; + this._resolution = renderer.resolution; this.dirty = true; } @@ -370,9 +372,9 @@ */ _renderCanvas(renderer) { - if (this.resolution !== renderer.resolution) + if (this._autoResolution && this._resolution !== renderer.resolution) { - this.resolution = renderer.resolution; + this._resolution = renderer.resolution; this.dirty = true; } @@ -442,8 +444,8 @@ let currentIteration; let stop; - const width = this.canvas.width / this.resolution; - const height = this.canvas.height / this.resolution; + const width = this.canvas.width / this._resolution; + const height = this.canvas.height / this._resolution; // make a copy of the style settings, so we can manipulate them later const fill = style.fill.slice(); @@ -646,4 +648,28 @@ this._text = text; this.dirty = true; } + + /** + * The resolution / device pixel ratio of the canvas. + * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually. + * @member {number} + * @default 1 + */ + get resolution() + { + return this._resolution; + } + + set resolution(value) // eslint-disable-line require-jsdoc + { + this._autoResolution = false; + + if (this._resolution === value) + { + return; + } + + this._resolution = value; + this.dirty = true; + } } diff --git a/packages/text/test/Text.js b/packages/text/test/Text.js index 7c0879b..ae051f1 100644 --- a/packages/text/test/Text.js +++ b/packages/text/test/Text.js @@ -1,8 +1,78 @@ const { Text } = require('../'); const { Sprite } = require('@pixi/sprite'); +const { skipHello } = require('@pixi/utils'); +const { settings } = require('@pixi/settings'); +const { CanvasRenderer } = require('@pixi/canvas-renderer'); +const { CanvasSpriteRenderer } = require('@pixi/canvas-sprite'); + +require('@pixi/canvas-display'); + +skipHello(); + +CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); describe('PIXI.Text', function () { + describe('properties', function () + { + it('should modify the height of the object when setting height', function () + { + const text = new Text('foo'); + + text.height = 300; + + expect(text.height).to.equal(300); + }); + + it('should modify the width of the object when setting width', function () + { + const text = new Text('foo'); + + text.width = 300; + + expect(text.width).to.equal(300); + }); + + it('should set the text resolution to match the resolution setting when constructed time', function () + { + const text = new Text('foo'); + + expect(text.resolution).to.equal(settings.RESOLUTION); + }); + + it('should update the text resolution to match the renderer resolution when being rendered to screen', function () + { + const text = new Text('foo'); + + expect(text.resolution).to.equal(settings.RESOLUTION); + + const renderer = new CanvasRenderer({ resolution: 2 }); + + renderer.render(text); + + expect(text.resolution).to.equal(renderer.resolution); + + renderer.destroy(); + }); + + it('should use any manually set text resolution over the renderer resolution', function () + { + const text = new Text('foo'); + + text.resolution = 3; + + expect(text.resolution).to.equal(3); + + const renderer = new CanvasRenderer({ resolution: 2 }); + + renderer.render(text); + + expect(text.resolution).to.equal(3); + + renderer.destroy(); + }); + }); + describe('destroy', function () { it('should call through to Sprite.destroy', function () @@ -60,24 +130,6 @@ text.destroy({ children: true, texture: true }); expect(childDestroyOpts).to.deep.equal({ children: true, texture: true, baseTexture: true }); }); - - it('should modify the height of the object when setting height', function () - { - const text = new Text('foo'); - - text.height = 300; - - expect(text.height).to.equal(300); - }); - - it('should modify the width of the object when setting width', function () - { - const text = new Text('foo'); - - text.width = 300; - - expect(text.width).to.equal(300); - }); }); describe('text', function ()