topical media & game development
mobile-graphic-enchant-dev-src-Label.js / js
@scope enchant.Label.prototype
enchant.Label = enchant.Class.create(enchant.Entity, {
@name enchant.Label
@class
[lang:ja]
Label クラス。
[/lang]
[lang:en]
A class for Label object.
[/lang]
[lang:de]
Erstellt ein Label Objekt.
[/lang]
@constructs
@extends enchant.Entity
initialize: function(text) {
enchant.Entity.call(this);
this.text = text || '';
this.width = 300;
this.font = '14px serif';
this.textAlign = 'left';
this._debugColor = '#ff0000';
},
width: {
get: function() {
return this._width;
},
set: function(width) {
this._width = width;
this._dirty = true;
// issue #164
this.updateBoundArea();
}
},
[lang:ja]
表示するテキスト.
DOM レンダラを利用している場合 (DOMScene 以下にある場合) 改行タグ (br) も利用できるが、
ユーザから入力したり、サーバから取得した文字列を表示する場合, XSS 脆弱性などに注意してください.
Canvas レンダラを利用できる場合でも、改行タグ (br, BR) は改行に変換されます。
[/lang]
[lang:en]
Text to be displayed.
[/lang]
[lang:de]
Darzustellender Text.
[/lang]
@type {String}
text: {
get: function() {
return this._text;
},
set: function(text) {
text = '' + text;
if(this._text === text) {
return;
}
this._text = text;
text = text.replace(/<(br|BR) ?\/?>/g, '<br/>');
this._splitText = text.split('<br/>');
this.updateBoundArea();
for (var i = 0, l = this._splitText.length; i < l; i++) {
text = this._splitText[i];
var metrics = this.getMetrics(text);
this._splitText[i] = {};
this._splitText[i].text = text;
this._splitText[i].height = metrics.height;
}
}
},
[lang:ja]
テキストの水平位置の指定.
CSSの'text-align'プロパティと同様の形式で指定できる.
[/lang]
[lang:en]
Specifies horizontal alignment of text.
Can be set according to the format of the CSS 'text-align' property.
[/lang]
[lang:de]
Spezifiziert die horizontale Ausrichtung des Textes.
Kann im gleichen Format wie die CSS 'text-align' Eigenschaft angegeben werden.
[/lang]
@type {String}
textAlign: {
get: function() {
return this._style['text-align'];
},
set: function(textAlign) {
this._style['text-align'] = textAlign;
this.updateBoundArea();
}
},
[lang:ja]
フォントの指定.
CSSの'font'プロパティと同様の形式で指定できる.
[/lang]
[lang:en]
Font settings.
Can be set according to the format of the CSS 'font' property.
[/lang]
[lang:de]
Text Eigenschaften.
Kann im gleichen Format wie die CSS 'font' Eigenschaft angegeben werden.
[/lang]
@type {String}
font: {
get: function() {
return this._style.font;
},
set: function(font) {
this._style.font = font;
this.updateBoundArea();
}
},
[lang:ja]
文字色の指定.
CSSの'color'プロパティと同様の形式で指定できる.
[/lang]
[lang:en]
Text color settings.
Can be set according to the format of the CSS 'color' property.
[/lang]
[lang:de]
Text Farbe.
Kann im gleichen Format wie die CSS 'color' Eigenschaft angegeben werden.
[/lang]
@type {String}
color: {
get: function() {
return this._style.color;
},
set: function(color) {
this._style.color = color;
}
},
cvsRender: function(ctx) {
var x, y = 0;
var labelWidth = this.width;
var charWidth, amount, line, text, c, buf, increase, length;
var bufWidth;
if (this._splitText) {
ctx.textBaseline = 'top';
ctx.font = this.font;
ctx.fillStyle = this.color || '#000000';
charWidth = ctx.measureText(' ').width;
amount = labelWidth / charWidth;
for (var i = 0, l = this._splitText.length; i < l; i++) {
line = this._splitText[i];
text = line.text;
c = 0;
while (text.length > c + amount || ctx.measureText(text.slice(c, c + amount)).width > labelWidth) {
buf = '';
increase = amount;
length = 0;
while (increase > 0) {
if (ctx.measureText(buf).width < labelWidth) {
length += increase;
buf = text.slice(c, c + length);
} else {
length -= increase;
buf = text.slice(c, c + length);
}
increase = increase / 2 | 0;
}
ctx.fillText(buf, 0, y);
y += line.height - 1;
c += length;
}
buf = text.slice(c, c + text.length);
if (this.textAlign === 'right') {
x = labelWidth - ctx.measureText(buf).width;
} else if (this.textAlign === 'center') {
x = (labelWidth - ctx.measureText(buf).width) / 2;
} else {
x = 0;
}
ctx.fillText(buf, x, y);
y += line.height - 1;
}
}
},
domRender: function(element) {
if (element.innerHTML !== this._text) {
element.innerHTML = this._text;
}
},
detectRender: function(ctx) {
ctx.fillRect(this._boundOffset, 0, this._boundWidth, this._boundHeight);
},
updateBoundArea: function() {
var metrics = this.getMetrics();
this._boundWidth = metrics.width;
this._boundHeight = metrics.height;
if (this.textAlign === 'right') {
this._boundOffset = this.width - this._boundWidth;
} else if (this.textAlign === 'center') {
this._boundOffset = (this.width - this._boundWidth) / 2;
} else {
this._boundOffset = 0;
}
},
getMetrics: function(text) {
var ret = {};
var div, width, height;
if (document.body) {
div = document.createElement('div');
for (var prop in this._style) {
if(prop !== 'width' && prop !== 'height') {
div.style[prop] = this._style[prop];
}
}
text = text || this._text;
div.innerHTML = text.replace(/ /g, ' ');
div.style.whiteSpace = 'noWrap';
div.style.lineHeight = 1;
document.body.appendChild(div);
ret.height = parseInt(getComputedStyle(div).height, 10) + 1;
div.style.position = 'absolute';
ret.width = parseInt(getComputedStyle(div).width, 10) + 1;
document.body.removeChild(div);
} else {
ret.width = this.width;
ret.height = this.height;
}
return ret;
}
});
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.