Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-24 05:33:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added in support for RTL text in the Text Game Object.

Browse source
This commit is contained in:
Richard Davey 2017-11-30 01:20:02 +00:00
parent 3c8a5b4132
commit 3964c7a2ac
2 changed files with 56 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
v3/src/gameobjects/text/TextStyle.js
View file

@ -90,11 +90,6 @@ var TextStyle = new Class({
syncFont: function (canvas, context)
{
if (this.rtl)
{
canvas.dir = 'rtl';
}
context.font = this.font;
context.textBaseline = 'alphabetic';

57
v3/src/gameobjects/text/static/Text.js
View file

@ -1,11 +1,12 @@
var Class = require('../../../utils/Class');
var GameObject = require('../../GameObject');
var Components = require('../../components');
var AddToDOM = require('../../../dom/AddToDOM');
var CanvasPool = require('../../../display/canvas/CanvasPool');
var Class = require('../../../utils/Class');
var Components = require('../../components');
var GameObject = require('../../GameObject');
var GetTextSize = require('../GetTextSize');
var RemoveFromDOM = require('../../../dom/RemoveFromDOM');
var TextRender = require('./TextRender');
var TextStyle = require('../TextStyle');
var GetTextSize = require('../GetTextSize');
var Text = new Class({
@ -78,6 +79,8 @@ var Text = new Class({
this.canvasTexture = null;
this.dirty = false;
this.initRTL();
this.setText(text);
var _this = this;
@ -89,6 +92,32 @@ var Text = new Class({
});
},
initRTL: function ()
{
if (!this.style.rtl)
{
return;
}
// Here is where the crazy starts.
//
// Due to browser implementation issues, you cannot fillText BiDi text to a canvas
// that is not part of the DOM. It just completely ignores the direction property.
this.canvas.dir = 'rtl';
// Experimental atm, but one day ...
this.context.direction = 'rtl';
// Add it to the DOM, but hidden within the parent canvas.
this.canvas.style.display = 'none';
AddToDOM(this.canvas, this.scene.sys.canvas);
// And finally we set the x origin
this.originX = 1;
},
setText: function (value)
{
if (Array.isArray(value))
@ -249,6 +278,12 @@ var Text = new Class({
linePositionY += (textSize.lineSpacing * i);
}
if (style.rtl)
{
linePositionX = w - linePositionX;
}
else
{
if (style.align === 'right')
{
linePositionX += textSize.width - textSize.lineWidths[i];
@ -257,6 +292,7 @@ var Text = new Class({
{
linePositionX += (textSize.width - textSize.lineWidths[i]) / 2;
}
}
if (this.autoRound)
{
@ -309,7 +345,18 @@ var Text = new Class({
out.data = data;
return out;
},
preDestroy: function ()
{
if (this.style.rtl)
{
RemoveFromDOM(this.canvas);
}
CanvasPool.remove(this.canvas);
}
});
module.exports = Text;