
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
491 lines
17 KiB
HTML
491 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/text/Text.js - pixi.js</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
|
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.4.3</em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
|
|
|
|
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
|
|
|
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
|
|
|
|
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
|
|
|
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
|
|
|
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
|
|
|
|
<li><a href="../classes/Spine.html">Spine</a></li>
|
|
|
|
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
|
|
|
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
|
|
|
<li><a href="../classes/Stage.html">Stage</a></li>
|
|
|
|
<li><a href="../classes/Text.html">Text</a></li>
|
|
|
|
<li><a href="../classes/Texture.html">Texture</a></li>
|
|
|
|
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
|
|
|
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/pixi/text/Text.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
*/
|
|
|
|
/**
|
|
* A Text Object will create a line(s) of text. To split a line you can use '\n'
|
|
*
|
|
* @class Text
|
|
* @extends Sprite
|
|
* @constructor
|
|
* @param text {String} The copy that you would like the text to display
|
|
* @param [style] {Object} The style parameters
|
|
* @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font
|
|
* @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
|
|
* @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
|
|
* @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
|
|
* @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
|
|
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
|
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
|
|
*/
|
|
PIXI.Text = function(text, style)
|
|
{
|
|
this.canvas = document.createElement('canvas');
|
|
this.context = this.canvas.getContext('2d');
|
|
PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
|
|
|
|
this.setText(text);
|
|
this.setStyle(style);
|
|
|
|
this.updateText();
|
|
this.dirty = false;
|
|
};
|
|
|
|
// constructor
|
|
PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
|
|
PIXI.Text.prototype.constructor = PIXI.Text;
|
|
|
|
/**
|
|
* Set the style of the text
|
|
*
|
|
* @method setStyle
|
|
* @param [style] {Object} The style parameters
|
|
* @param [style.font='bold 20pt Arial'] {String} The style and size of the font
|
|
* @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
|
|
* @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
|
|
* @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
|
|
* @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
|
|
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
|
|
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
|
|
*/
|
|
PIXI.Text.prototype.setStyle = function(style)
|
|
{
|
|
style = style || {};
|
|
style.font = style.font || 'bold 20pt Arial';
|
|
style.fill = style.fill || 'black';
|
|
style.align = style.align || 'left';
|
|
style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
|
|
style.strokeThickness = style.strokeThickness || 0;
|
|
style.wordWrap = style.wordWrap || false;
|
|
style.wordWrapWidth = style.wordWrapWidth || 100;
|
|
this.style = style;
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Set the copy for the text object. To split a line you can use '\n'
|
|
*
|
|
* @method setText
|
|
* @param {String} text The copy that you would like the text to display
|
|
*/
|
|
PIXI.Text.prototype.setText = function(text)
|
|
{
|
|
this.text = text.toString() || ' ';
|
|
this.dirty = true;
|
|
|
|
};
|
|
|
|
/**
|
|
* Renders text
|
|
*
|
|
* @method updateText
|
|
* @private
|
|
*/
|
|
PIXI.Text.prototype.updateText = function()
|
|
{
|
|
this.context.font = this.style.font;
|
|
|
|
var outputText = this.text;
|
|
|
|
// word wrap
|
|
// preserve original text
|
|
if(this.style.wordWrap)outputText = this.wordWrap(this.text);
|
|
|
|
//split text into lines
|
|
var lines = outputText.split(/(?:\r\n|\r|\n)/);
|
|
|
|
//calculate text width
|
|
var lineWidths = [];
|
|
var maxLineWidth = 0;
|
|
for (var i = 0; i < lines.length; i++)
|
|
{
|
|
var lineWidth = this.context.measureText(lines[i]).width;
|
|
lineWidths[i] = lineWidth;
|
|
maxLineWidth = Math.max(maxLineWidth, lineWidth);
|
|
}
|
|
this.canvas.width = maxLineWidth + this.style.strokeThickness;
|
|
|
|
//calculate text height
|
|
var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness;
|
|
this.canvas.height = lineHeight * lines.length;
|
|
|
|
if(navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
|
|
|
|
//set canvas text styles
|
|
this.context.fillStyle = this.style.fill;
|
|
this.context.font = this.style.font;
|
|
|
|
this.context.strokeStyle = this.style.stroke;
|
|
this.context.lineWidth = this.style.strokeThickness;
|
|
|
|
this.context.textBaseline = 'top';
|
|
|
|
//draw lines line by line
|
|
for (i = 0; i < lines.length; i++)
|
|
{
|
|
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
|
|
|
|
if(this.style.align === 'right')
|
|
{
|
|
linePosition.x += maxLineWidth - lineWidths[i];
|
|
}
|
|
else if(this.style.align === 'center')
|
|
{
|
|
linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
|
|
}
|
|
|
|
if(this.style.stroke && this.style.strokeThickness)
|
|
{
|
|
this.context.strokeText(lines[i], linePosition.x, linePosition.y);
|
|
}
|
|
|
|
if(this.style.fill)
|
|
{
|
|
this.context.fillText(lines[i], linePosition.x, linePosition.y);
|
|
}
|
|
}
|
|
|
|
this.updateTexture();
|
|
};
|
|
|
|
/**
|
|
* Updates texture size based on canvas size
|
|
*
|
|
* @method updateTexture
|
|
* @private
|
|
*/
|
|
PIXI.Text.prototype.updateTexture = function()
|
|
{
|
|
this.texture.baseTexture.width = this.canvas.width;
|
|
this.texture.baseTexture.height = this.canvas.height;
|
|
this.texture.frame.width = this.canvas.width;
|
|
this.texture.frame.height = this.canvas.height;
|
|
|
|
this._width = this.canvas.width;
|
|
this._height = this.canvas.height;
|
|
|
|
this.requiresUpdate = true;
|
|
};
|
|
|
|
PIXI.Text.prototype._renderWebGL = function(renderSession)
|
|
{
|
|
if(this.requiresUpdate)
|
|
{
|
|
this.requiresUpdate = false;
|
|
PIXI.updateWebGLTexture(this.texture.baseTexture, renderSession.gl);
|
|
}
|
|
|
|
PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);
|
|
};
|
|
|
|
/**
|
|
* Updates the transform of this object
|
|
*
|
|
* @method updateTransform
|
|
* @private
|
|
*/
|
|
PIXI.Text.prototype.updateTransform = function()
|
|
{
|
|
if(this.dirty)
|
|
{
|
|
this.updateText();
|
|
this.dirty = false;
|
|
}
|
|
|
|
PIXI.Sprite.prototype.updateTransform.call(this);
|
|
};
|
|
|
|
/*
|
|
* http://stackoverflow.com/users/34441/ellisbben
|
|
* great solution to the problem!
|
|
*
|
|
* @method determineFontHeight
|
|
* @param fontStyle {Object}
|
|
* @private
|
|
*/
|
|
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
|
|
{
|
|
// build a little reference dictionary so if the font style has been used return a
|
|
// cached version...
|
|
var result = PIXI.Text.heightCache[fontStyle];
|
|
|
|
if(!result)
|
|
{
|
|
var body = document.getElementsByTagName('body')[0];
|
|
var dummy = document.createElement('div');
|
|
var dummyText = document.createTextNode('M');
|
|
dummy.appendChild(dummyText);
|
|
dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0');
|
|
body.appendChild(dummy);
|
|
|
|
result = dummy.offsetHeight;
|
|
PIXI.Text.heightCache[fontStyle] = result;
|
|
|
|
body.removeChild(dummy);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Applies newlines to a string to have it optimally fit into the horizontal
|
|
* bounds set by the Text object's wordWrapWidth property.
|
|
*
|
|
* @method wordWrap
|
|
* @param text {String}
|
|
* @private
|
|
*/
|
|
PIXI.Text.prototype.wordWrap = function(text)
|
|
{
|
|
// Greedy wrapping algorithm that will wrap words as the line grows longer
|
|
// than its horizontal bounds.
|
|
var result = '';
|
|
var lines = text.split('\n');
|
|
for (var i = 0; i < lines.length; i++)
|
|
{
|
|
var spaceLeft = this.style.wordWrapWidth;
|
|
var words = lines[i].split(' ');
|
|
for (var j = 0; j < words.length; j++)
|
|
{
|
|
var wordWidth = this.context.measureText(words[j]).width;
|
|
var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
|
|
if(wordWidthWithSpace > spaceLeft)
|
|
{
|
|
// Skip printing the newline if it's the first word of the line that is
|
|
// greater than the word wrap width.
|
|
if(j > 0)
|
|
{
|
|
result += '\n';
|
|
}
|
|
result += words[j] + ' ';
|
|
spaceLeft = this.style.wordWrapWidth - wordWidth;
|
|
}
|
|
else
|
|
{
|
|
spaceLeft -= wordWidthWithSpace;
|
|
result += words[j] + ' ';
|
|
}
|
|
}
|
|
result += '\n';
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Destroys this text object
|
|
*
|
|
* @method destroy
|
|
* @param destroyTexture {Boolean}
|
|
*/
|
|
PIXI.Text.prototype.destroy = function(destroyTexture)
|
|
{
|
|
if(destroyTexture)
|
|
{
|
|
this.texture.destroy();
|
|
}
|
|
|
|
};
|
|
|
|
PIXI.Text.heightCache = {};
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|