Text supports high dpi resolution for its internal canvas

This commit is contained in:
Richard Davey 2018-07-17 22:44:12 +01:00
parent 6ddd1644f2
commit 94540e112e
4 changed files with 22 additions and 15 deletions

View file

@ -40,6 +40,7 @@ var propertyMap = {
maxLines: [ 'maxLines', 0 ],
fixedWidth: [ 'fixedWidth', 0 ],
fixedHeight: [ 'fixedHeight', 0 ],
resolution: [ 'resolution', 0 ],
rtl: [ 'rtl', false ],
testString: [ 'testString', '|MÉqgy' ],
baselineX: [ 'baselineX', 1.2 ],
@ -259,6 +260,17 @@ var TextStyle = new Class({
*/
this.fixedHeight;
/**
* The resolution the text is rendered to its internal canvas at.
* The default is 0, which means it will use the resolution set in the Game Config.
*
* @name Phaser.GameObjects.Text.TextStyle#resolution
* @type {number}
* @default 0
* @since 3.12.0
*/
this.resolution;
/**
* Whether the text should render right to left.
*

View file

@ -141,16 +141,6 @@ var Text = new Class({
*/
this.text = '';
/**
* The resolution of the text.
*
* @name Phaser.GameObjects.Text#resolution
* @type {number}
* @default 1
* @since 3.0.0
*/
this.resolution = 1;
/**
* Specify a padding value which is added to the line width and height when calculating the Text size.
* Allows you to add extra spacing if the browser is unable to accurately determine the true font dimensions.
@ -201,6 +191,12 @@ var Text = new Class({
*/
this.dirty = false;
// If resolution wasn't set, then we get it from the game config
if (this.style.resolution === 0)
{
this.style.resolution = scene.sys.game.config.resolution;
}
this.initRTL();
if (style && style.padding)
@ -951,7 +947,7 @@ var Text = new Class({
var canvas = this.canvas;
var context = this.context;
var style = this.style;
var resolution = this.resolution;
var resolution = style.resolution;
var size = style.metrics;
style.syncFont(canvas, context);
@ -1004,7 +1000,7 @@ var Text = new Class({
context.save();
// context.scale(resolution, resolution);
context.scale(resolution, resolution);
if (style.backgroundColor)
{
@ -1105,7 +1101,6 @@ var Text = new Class({
autoRound: this.autoRound,
text: this.text,
style: this.style.toJSON(),
resolution: this.resolution,
padding: {
left: this.padding.left,
right: this.padding.right,

View file

@ -89,7 +89,7 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
ctx.scale(src.flipX ? -1 : 1, src.flipY ? -1 : 1);
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -src.displayOriginX, -src.displayOriginY, canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -src.displayOriginX, -src.displayOriginY, canvas.width / src.style.resolution, canvas.height / src.style.resolution);
ctx.restore();
};

View file

@ -42,7 +42,7 @@ var TextWebGLRenderer = function (renderer, src, interpolationPercentage, camera
src.canvasTexture,
src.canvasTexture.width, src.canvasTexture.height,
src.x, src.y,
src.canvasTexture.width, src.canvasTexture.height,
src.canvasTexture.width / src.style.resolution, src.canvasTexture.height / src.style.resolution,
src.scaleX, src.scaleY,
src.rotation,
src.flipX, src.flipY,