847eb6c48e
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
365 lines
12 KiB
HTML
365 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/text/BitmapText.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/BitmapText.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 using bitmap font. To split a line you can use '\n', '\r' or '\r\n'
|
|
* You can generate the fnt files using
|
|
* http://www.angelcode.com/products/bmfont/ for windows or
|
|
* http://www.bmglyph.com/ for mac.
|
|
*
|
|
* @class BitmapText
|
|
* @extends DisplayObjectContainer
|
|
* @constructor
|
|
* @param text {String} The copy that you would like the text to display
|
|
* @param style {Object} The style parameters
|
|
* @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
|
|
* @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
|
|
*/
|
|
PIXI.BitmapText = function(text, style)
|
|
{
|
|
PIXI.DisplayObjectContainer.call(this);
|
|
|
|
this.setText(text);
|
|
this.setStyle(style);
|
|
this.updateText();
|
|
this.dirty = false;
|
|
};
|
|
|
|
// constructor
|
|
PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
|
|
PIXI.BitmapText.prototype.constructor = PIXI.BitmapText;
|
|
|
|
/**
|
|
* Set the copy for the text object
|
|
*
|
|
* @method setText
|
|
* @param text {String} The copy that you would like the text to display
|
|
*/
|
|
PIXI.BitmapText.prototype.setText = function(text)
|
|
{
|
|
this.text = text || ' ';
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Set the style of the text
|
|
*
|
|
* @method setStyle
|
|
* @param style {Object} The style parameters
|
|
* @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
|
|
* @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
|
|
*/
|
|
PIXI.BitmapText.prototype.setStyle = function(style)
|
|
{
|
|
style = style || {};
|
|
style.align = style.align || 'left';
|
|
this.style = style;
|
|
|
|
var font = style.font.split(' ');
|
|
this.fontName = font[font.length - 1];
|
|
this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
|
|
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Renders text
|
|
*
|
|
* @method updateText
|
|
* @private
|
|
*/
|
|
PIXI.BitmapText.prototype.updateText = function()
|
|
{
|
|
var data = PIXI.BitmapText.fonts[this.fontName];
|
|
var pos = new PIXI.Point();
|
|
var prevCharCode = null;
|
|
var chars = [];
|
|
var maxLineWidth = 0;
|
|
var lineWidths = [];
|
|
var line = 0;
|
|
var scale = this.fontSize / data.size;
|
|
for(var i = 0; i < this.text.length; i++)
|
|
{
|
|
var charCode = this.text.charCodeAt(i);
|
|
if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))
|
|
{
|
|
lineWidths.push(pos.x);
|
|
maxLineWidth = Math.max(maxLineWidth, pos.x);
|
|
line++;
|
|
|
|
pos.x = 0;
|
|
pos.y += data.lineHeight;
|
|
prevCharCode = null;
|
|
continue;
|
|
}
|
|
|
|
var charData = data.chars[charCode];
|
|
if(!charData) continue;
|
|
|
|
if(prevCharCode && charData[prevCharCode])
|
|
{
|
|
pos.x += charData.kerning[prevCharCode];
|
|
}
|
|
chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
|
|
pos.x += charData.xAdvance;
|
|
|
|
prevCharCode = charCode;
|
|
}
|
|
|
|
lineWidths.push(pos.x);
|
|
maxLineWidth = Math.max(maxLineWidth, pos.x);
|
|
|
|
var lineAlignOffsets = [];
|
|
for(i = 0; i <= line; i++)
|
|
{
|
|
var alignOffset = 0;
|
|
if(this.style.align === 'right')
|
|
{
|
|
alignOffset = maxLineWidth - lineWidths[i];
|
|
}
|
|
else if(this.style.align === 'center')
|
|
{
|
|
alignOffset = (maxLineWidth - lineWidths[i]) / 2;
|
|
}
|
|
lineAlignOffsets.push(alignOffset);
|
|
}
|
|
|
|
for(i = 0; i < chars.length; i++)
|
|
{
|
|
var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode);
|
|
c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
|
|
c.position.y = chars[i].position.y * scale;
|
|
c.scale.x = c.scale.y = scale;
|
|
this.addChild(c);
|
|
}
|
|
|
|
this.width = maxLineWidth * scale;
|
|
this.height = (pos.y + data.lineHeight) * scale;
|
|
};
|
|
|
|
/**
|
|
* Updates the transform of this object
|
|
*
|
|
* @method updateTransform
|
|
* @private
|
|
*/
|
|
PIXI.BitmapText.prototype.updateTransform = function()
|
|
{
|
|
if(this.dirty)
|
|
{
|
|
while(this.children.length > 0)
|
|
{
|
|
this.removeChild(this.getChildAt(0));
|
|
}
|
|
this.updateText();
|
|
|
|
this.dirty = false;
|
|
}
|
|
|
|
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
|
|
};
|
|
|
|
PIXI.BitmapText.fonts = {};
|
|
|
|
</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>
|