/****************************************************************************
Copyright (c) 2010-2012 cocos2d-x.org
Copyright (c) 2008-2010 Ricardo Quesada
Copyright (c) 2011 Zynga Inc.
http://www.cocos2d-x.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
****************************************************************************/
/**
* cc.LabelTTF is a subclass of cc.TextureNode that knows how to render text labels
* All features from cc.TextureNode are valid in cc.LabelTTF
* cc.LabelTTF objects are slow for js-binding on mobile devices.Consider using cc.LabelAtlas or cc.LabelBMFont instead.
* Consider using cc.LabelAtlas or cc.LabelBMFont instead.
* @class
* @extends cc.Sprite
*/
cc.LabelTTF = cc.Sprite.extend(/** @lends cc.LabelTTF# */{
_dimensions:null,
_hAlignment:cc.TEXT_ALIGNMENT_CENTER,
_vAlignment:cc.VERTICAL_TEXT_ALIGNMENT_TOP,
_fontName: null,
_fontSize:0.0,
_string:"",
_originalText: null,
_isMultiLine:false,
_fontStyleStr:null,
// font shadow
_shadowEnabled:false,
_shadowOffset:null,
_shadowOpacity:0,
_shadowBlur:0,
_shadowColorStr:null,
// font stroke
_strokeEnabled:false,
_strokeColor:null,
_strokeSize:0,
_strokeColorStr:null,
// font tint
_textFillColor:null,
_fillColorStr:null,
_strokeShadowOffsetX:0,
_strokeShadowOffsetY:0,
_needUpdateTexture:false,
_labelCanvas:null,
_labelContext:null,
_lineWidths:null,
/**
* Constructor
*/
ctor:function () {
cc.Sprite.prototype.ctor.call(this);
this._dimensions = cc.SizeZero();
this._hAlignment = cc.TEXT_ALIGNMENT_LEFT;
this._vAlignment = cc.VERTICAL_TEXT_ALIGNMENT_TOP;
this._opacityModifyRGB = false;
this._fontStyleStr = "";
this._fontName = "Arial";
this._isMultiLine = false;
this._shadowEnabled = false;
this._shadowOffset = cc.SizeZero();
this._shadowOpacity = 0;
this._shadowBlur = 0;
this._shadowColorStr = "rgba(128, 128, 128, 0.5)";
this._strokeEnabled = false;
this._strokeColor = cc.white();
this._strokeSize = 0;
this._strokeColorStr = "";
this._textFillColor = cc.white();
this._fillColorStr = "rgba(255,255,255,1)";
this._strokeShadowOffsetX = 0;
this._strokeShadowOffsetY = 0;
this._needUpdateTexture = false;
this._lineWidths = [];
this._setColorsString();
},
init:function () {
return this.initWithString(" ", this._fontName, this._fontSize);
},
_measureConfig: function() {
this._getLabelContext().font = this._fontStyleStr;
},
_measure: function(text) {
return this._getLabelContext().measureText(text).width;
},
_checkNextline: function( text, width){
var tWidth = this._measure(text);
// Estimated word number per line
var baseNb = Math.floor( text.length * width / tWidth );
// Next line is a line with line break
var nextlinebreak = text.indexOf('\n');
if(baseNb*0.8 >= nextlinebreak && nextlinebreak > 0) return nextlinebreak+1;
// Text width smaller than requested width
if(tWidth < width) return text.length;
var found = false, l = width + 1, idfound = -1, index = baseNb, result,
re = cc.LabelTTF._checkRegEx,
reversre = cc.LabelTTF._reverseCheckRegEx,
enre = cc.LabelTTF._checkEnRegEx,
substr = text.substr(baseNb);
// Forward check
// Find next special caracter or chinese caracters
while (result = re.exec(substr)) {
index += result[0].length;
var tem = text.substr(0, index);
l = this._measure(tem);
if(result[2] == '\n' && l < width) {
found = true;
idfound = index;
break;
}
if(l > width) {
if(idfound != -1)
found = true;
break;
}
idfound = index;
substr = text.substr(index);
}
if(found) return idfound;
// Backward check when forward check failed
substr = text.substr(0, baseNb);
idfound = baseNb;
while (result = reversre.exec(substr)) {
// BUG: Not secured if check with result[0]
idfound = result[1].length;
substr = result[1];
l = this._measure(substr);
if(l < width) {
if(enre.test(result[2]))
idfound++;
break;
}
}
// Avoid when idfound == 0, the process may enter in a infinite loop
return idfound || 1;
},
/**
* Prints out a description of this class
* @return {String}
*/
description:function () {
return "";
},
setColor: null,
_setColorForCanvas: function (color3) {
cc.NodeRGBA.prototype.setColor.call(this, color3);
this._setColorsStringForCanvas();
},
_setColorsString: null,
_setColorsStringForCanvas: function () {
this._needUpdateTexture = true;
var locDisplayColor = this._displayedColor, locDisplayedOpacity = this._displayedOpacity;
var locStrokeColor = this._strokeColor, locFontFillColor = this._textFillColor;
this._shadowColorStr = "rgba(" + (0 | (locDisplayColor.r * 0.5)) + "," + (0 | (locDisplayColor.g * 0.5)) + "," + (0 | (locDisplayColor.b * 0.5)) + "," + this._shadowOpacity + ")";
this._fillColorStr = "rgba(" + (0 | (locDisplayColor.r /255 * locFontFillColor.r)) + "," + (0 | (locDisplayColor.g / 255 * locFontFillColor.g)) + ","
+ (0 | (locDisplayColor.b / 255 * locFontFillColor.b)) + ", " + locDisplayedOpacity / 255 + ")";
this._strokeColorStr = "rgba(" + (0 | (locDisplayColor.r / 255 * locStrokeColor.r)) + "," + (0 | (locDisplayColor.g / 255 * locStrokeColor.g)) + ","
+ (0 | (locDisplayColor.b / 255 * locStrokeColor.b)) + ", " + locDisplayedOpacity / 255 + ")";
},
_setColorsStringForWebGL:function(){
this._needUpdateTexture = true;
var locStrokeColor = this._strokeColor, locFontFillColor = this._textFillColor;
this._shadowColorStr = "rgba(128,128,128," + this._shadowOpacity + ")";
this._fillColorStr = "rgba(" + (0 | locFontFillColor.r) + "," + (0 | locFontFillColor.g) + "," + (0 | locFontFillColor.b) + ", 1)";
this._strokeColorStr = "rgba(" + (0 | locStrokeColor.r) + "," + (0 | locStrokeColor.g) + "," + (0 | locStrokeColor.b) + ", 1)";
},
updateDisplayedColor:null,
_updateDisplayedColorForCanvas:function(parentColor){
cc.NodeRGBA.prototype.updateDisplayedColor.call(this,parentColor);
this._setColorsString();
},
setOpacity: null,
_setOpacityForCanvas: function (opacity) {
if (this._opacity === opacity)
return;
cc.Sprite.prototype.setOpacity.call(this, opacity);
this._setColorsString();
this._needUpdateTexture = true;
},
updateDisplayedOpacity: null,
updateDisplayedOpacityForCanvas: function(parentOpacity){
cc.NodeRGBA.prototype.updateDisplayedOpacity.call(this, parentOpacity);
this._setColorsString();
},
/**
* returns the text of the label
* @return {String}
*/
getString:function () {
return this._string;
},
/**
* return Horizontal Alignment of cc.LabelTTF
* @return {cc.TEXT_ALIGNMENT_LEFT|cc.TEXT_ALIGNMENT_CENTER|cc.TEXT_ALIGNMENT_RIGHT}
*/
getHorizontalAlignment:function () {
return this._hAlignment;
},
/**
* return Vertical Alignment of cc.LabelTTF
* @return {cc.VERTICAL_TEXT_ALIGNMENT_TOP|cc.VERTICAL_TEXT_ALIGNMENT_CENTER|cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM}
*/
getVerticalAlignment:function () {
return this._vAlignment;
},
/**
* return Dimensions of cc.LabelTTF
* @return {cc.Size}
*/
getDimensions:function () {
return cc.size(this._dimensions.width, this._dimensions.height);
},
/**
* return font size of cc.LabelTTF
* @return {Number}
*/
getFontSize:function () {
return this._fontSize;
},
/**
* return font name of cc.LabelTTF
* @return {String}
*/
getFontName:function () {
return this._fontName;
},
/**
* initializes the cc.LabelTTF with a font name, alignment, dimension and font size
* @param {String} label string
* @param {String} fontName
* @param {Number} fontSize
* @param {cc.Size} [dimensions=]
* @param {Number} [hAlignment=]
* @param {Number} [vAlignment=]
* @return {Boolean} return false on error
*/
initWithString:function (label, fontName, fontSize, dimensions, hAlignment, vAlignment) {
var strInfo;
if(label)
strInfo = label + "";
else
strInfo = "";
fontSize = fontSize || 16;
dimensions = dimensions || cc.size(0, fontSize);
hAlignment = hAlignment || cc.TEXT_ALIGNMENT_LEFT;
vAlignment = vAlignment || cc.VERTICAL_TEXT_ALIGNMENT_TOP;
if (cc.Sprite.prototype.init.call(this)) {
this._opacityModifyRGB = false;
this._dimensions = cc.size(dimensions.width, dimensions.height);
this._fontName = fontName || "Arial";
this._hAlignment = hAlignment;
this._vAlignment = vAlignment;
//this._fontSize = (cc.renderContextType === cc.CANVAS) ? fontSize : fontSize * cc.CONTENT_SCALE_FACTOR();
this._fontSize = fontSize;
this._fontStyleStr = this._fontSize + "px '" + fontName + "'";
this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(fontName,this._fontSize);
this.setString(strInfo);
this._setColorsString();
this._updateTexture();
this._needUpdateTexture = false;
return true;
}
return false;
},
/**
* initializes the CCLabelTTF with a font name, alignment, dimension and font size
* @param {String} text
* @param {cc.FontDefinition} textDefinition
* @return {Boolean}
*/
initWithStringAndTextDefinition:null,
_initWithStringAndTextDefinitionForCanvas:function(text, textDefinition){
if(!cc.Sprite.prototype.init.call(this))
return false;
// prepare everything needed to render the label
this._updateWithTextDefinition(textDefinition, false);
// set the string
this.setString(text);
return true;
},
_initWithStringAndTextDefinitionForWebGL:function(text, textDefinition){
if(!cc.Sprite.prototype.init.call(this))
return false;
// shader program
this.setShaderProgram(cc.ShaderCache.getInstance().programForKey(cc.LabelTTF._SHADER_PROGRAM));
// prepare everything needed to render the label
this._updateWithTextDefinition(textDefinition, false);
// set the string
this.setString(text);
return true;
},
/**
* set the text definition used by this label
* @param {cc.FontDefinition} theDefinition
*/
setTextDefinition:function(theDefinition){
if (theDefinition)
this._updateWithTextDefinition(theDefinition, true);
},
/**
* get the text definition used by this label
* @return {cc.FontDefinition}
*/
getTextDefinition:function(){
return this._prepareTextDefinition(false);
},
/**
* enable or disable shadow for the label
* @param {cc.Size} shadowOffset
* @param {Number} shadowOpacity (0 to 1)
* @param {Number} shadowBlur
* @param {Boolean} [mustUpdateTexture=false] This parameter is not used. It's kept for cocos2d-x JSB compatibility
*/
enableShadow:function(shadowOffset, shadowOpacity, shadowBlur, mustUpdateTexture){
shadowOpacity = shadowOpacity || 0.5;
if (false === this._shadowEnabled)
this._shadowEnabled = true;
var locShadowOffset = this._shadowOffset;
if (locShadowOffset && (locShadowOffset.width != shadowOffset.width) || (locShadowOffset.height != shadowOffset.height)) {
locShadowOffset.width = shadowOffset.width;
locShadowOffset.height = shadowOffset.height;
}
if (this._shadowOpacity != shadowOpacity ){
this._shadowOpacity = shadowOpacity;
}
this._setColorsString();
if (this._shadowBlur != shadowBlur)
this._shadowBlur = shadowBlur;
this._needUpdateTexture = true;
},
/**
* disable shadow rendering
* @param {Boolean} [mustUpdateTexture=false] This parameter is not used. It's kept for cocos2d-x JSB compatibility
*/
disableShadow:function(mustUpdateTexture){
if (this._shadowEnabled) {
this._shadowEnabled = false;
this._needUpdateTexture = true;
}
},
/**
* enable or disable stroke
* @param {cc.Color3B} strokeColor
* @param {Number} strokeSize
* @param {Boolean} [mustUpdateTexture=false] This parameter is not used. It's kept for cocos2d-x JSB compatibility
*/
enableStroke:function(strokeColor, strokeSize, mustUpdateTexture){
if(this._strokeEnabled === false)
this._strokeEnabled = true;
var locStrokeColor = this._strokeColor;
if ( (locStrokeColor.r !== strokeColor.r) || (locStrokeColor.g !== strokeColor.g) || (locStrokeColor.b !== strokeColor.b) ) {
locStrokeColor.r = strokeColor.r;
locStrokeColor.g = strokeColor.g;
locStrokeColor.b = strokeColor.b;
this._setColorsString();
}
if (this._strokeSize!== strokeSize)
this._strokeSize = strokeSize || 0;
this._needUpdateTexture = true;
},
/**
* disable stroke
* @param {Boolean} [mustUpdateTexture=false] This parameter is not used. It's kept for cocos2d-x JSB compatibility
*/
disableStroke:function(mustUpdateTexture){
if (this._strokeEnabled){
this._strokeEnabled = false;
this._needUpdateTexture = true;
}
},
/**
* set text tinting
* @param {cc.Color3B} tintColor
* @param {Boolean} [mustUpdateTexture=false] This parameter is not used. It's kept for cocos2d-x JSB compatibility
*/
setFontFillColor:null,
_setFontFillColorForCanvas: function (tintColor, mustUpdateTexture) {
//mustUpdateTexture = (mustUpdateTexture == null) ? true : mustUpdateTexture;
var locTextFillColor = this._textFillColor;
if (locTextFillColor.r != tintColor.r || locTextFillColor.g != tintColor.g || locTextFillColor.b != tintColor.b) {
locTextFillColor.r = tintColor.r;
locTextFillColor.g = tintColor.g;
locTextFillColor.b = tintColor.b;
this._setColorsString();
this._needUpdateTexture = true;
}
},
_setFontFillColorForWebGL: function (tintColor, mustUpdateTexture) {
var locTextFillColor = this._textFillColor;
if (locTextFillColor.r != tintColor.r || locTextFillColor.g != tintColor.g || locTextFillColor.b != tintColor.b) {
locTextFillColor.r = tintColor.r;
locTextFillColor.g = tintColor.g;
locTextFillColor.b = tintColor.b;
this._setColorsString();
this._needUpdateTexture = true;
}
},
//set the text definition for this label
_updateWithTextDefinition:function(textDefinition, mustUpdateTexture){
if(textDefinition.fontDimensions){
this._dimensions.width = textDefinition.fontDimensions.width;
this._dimensions.height = textDefinition.fontDimensions.height;
} else {
this._dimensions.width = 0;
this._dimensions.height = 0;
}
this._hAlignment = textDefinition.fontAlignmentH;
this._vAlignment = textDefinition.fontAlignmentV;
this._fontName = textDefinition.fontName;
this._fontSize = textDefinition.fontSize||12;
this._fontStyleStr = this._fontSize + "px '" + this._fontName + "'";
this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,this._fontSize);
// shadow
if ( textDefinition.shadowEnabled)
this.enableShadow(textDefinition.shadowOffset, textDefinition.shadowOpacity, textDefinition.shadowBlur, false);
// stroke
if ( textDefinition.strokeEnabled )
this.enableStroke(textDefinition.strokeColor, textDefinition.strokeSize, false);
// fill color
this.setFontFillColor(textDefinition.fontFillColor, false);
if (mustUpdateTexture)
this._updateTexture();
},
_prepareTextDefinition:function(adjustForResolution){
var texDef = new cc.FontDefinition();
if (adjustForResolution){
//texDef.fontSize = (cc.renderContextType === cc.CANVAS) ? this._fontSize : this._fontSize * cc.CONTENT_SCALE_FACTOR();
texDef.fontSize = this._fontSize;
texDef.fontDimensions = cc.SIZE_POINTS_TO_PIXELS(this._dimensions);
} else {
texDef.fontSize = this._fontSize;
texDef.fontDimensions = cc.size(this._dimensions.width, this._dimensions.height);
}
texDef.fontName = this._fontName;
texDef.fontAlignmentH = this._hAlignment;
texDef.fontAlignmentV = this._vAlignment;
// stroke
if ( this._strokeEnabled ){
texDef.strokeEnabled = true;
var locStrokeColor = this._strokeColor;
texDef.strokeColor = new cc.Color3B(locStrokeColor.r, locStrokeColor.g, locStrokeColor.b);
texDef.strokeSize = this._strokeSize;
}else
texDef.strokeEnabled = false;
// shadow
if ( this._shadowEnabled ){
texDef.shadowEnabled = true;
texDef.shadowBlur = this._shadowBlur;
texDef.shadowOpacity = this._shadowOpacity;
texDef.shadowOffset = adjustForResolution ? cc.SIZE_POINTS_TO_PIXELS(this._shadowOffset)
: cc.size(this._shadowOffset.width,this._shadowOffset.height);
}else
texDef._shadowEnabled = false;
// text tint
var locTextFillColor = this._textFillColor;
texDef.fontFillColor = new cc.Color3B(locTextFillColor.r, locTextFillColor.g, locTextFillColor.b);
return texDef;
},
_fontClientHeight:18,
/**
* changes the string to render
* @warning Changing the string is as expensive as creating a new cc.LabelTTF. To obtain better performance use cc.LabelAtlas
* @param {String} text text for the label
*/
setString:function (text) {
text = String(text);
if (this._originalText != text) {
this._originalText = text + "";
this._updateString();
// Force update
this._needUpdateTexture = true;
}
},
_updateString: function() {
this._string = this._originalText;
},
/**
* set Horizontal Alignment of cc.LabelTTF
* @param {cc.TEXT_ALIGNMENT_LEFT|cc.TEXT_ALIGNMENT_CENTER|cc.TEXT_ALIGNMENT_RIGHT} alignment Horizontal Alignment
*/
setHorizontalAlignment:function (alignment) {
if (alignment !== this._hAlignment) {
this._hAlignment = alignment;
// Force update
this._needUpdateTexture = true;
}
},
/**
* set Vertical Alignment of cc.LabelTTF
* @param {cc.VERTICAL_TEXT_ALIGNMENT_TOP|cc.VERTICAL_TEXT_ALIGNMENT_CENTER|cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM} verticalAlignment
*/
setVerticalAlignment:function (verticalAlignment) {
if (verticalAlignment != this._vAlignment) {
this._vAlignment = verticalAlignment;
// Force update
this._needUpdateTexture = true;
}
},
/**
* set Dimensions of cc.LabelTTF
* @param {cc.Size} dim
*/
setDimensions:function (dim) {
if (dim.width != this._dimensions.width || dim.height != this._dimensions.height) {
this._dimensions = dim;
this._updateString();
// Force udpate
this._needUpdateTexture = true;
}
},
/**
* set font size of cc.LabelTTF
* @param {Number} fontSize
*/
setFontSize:function (fontSize) {
if (this._fontSize !== fontSize) {
this._fontSize = fontSize;
this._fontStyleStr = fontSize + "px '" + this._fontName + "'";
this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,fontSize);
// Force update
this._needUpdateTexture = true;
}
},
/**
* set font name of cc.LabelTTF
* @param {String} fontName
*/
setFontName:function (fontName) {
if (this._fontName && this._fontName != fontName ) {
this._fontName = fontName;
this._fontStyleStr = this._fontSize + "px '" + fontName + "'";
this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(fontName,this._fontSize);
// Force update
this._needUpdateTexture = true;
}
},
_drawTTFInCanvas: function (context) {
if (!context)
return;
var locStrokeShadowOffsetX = this._strokeShadowOffsetX, locStrokeShadowOffsetY = this._strokeShadowOffsetY;
var locContentSizeHeight = this._contentSize.height - locStrokeShadowOffsetY, locVAlignment = this._vAlignment, locHAlignment = this._hAlignment,
locFontHeight = this._fontClientHeight, locStrokeSize = this._strokeSize;
context.setTransform(1, 0, 0, 1, 0 + locStrokeShadowOffsetX * 0.5 , locContentSizeHeight + locStrokeShadowOffsetY * 0.5);
//this is fillText for canvas
if (context.font != this._fontStyleStr)
context.font = this._fontStyleStr;
context.fillStyle = this._fillColorStr;
var xOffset = 0, yOffset = 0;
//stroke style setup
var locStrokeEnabled = this._strokeEnabled;
if (locStrokeEnabled) {
context.lineWidth = locStrokeSize * 2;
context.strokeStyle = this._strokeColorStr;
}
//shadow style setup
if (this._shadowEnabled) {
var locShadowOffset = this._shadowOffset;
context.shadowColor = this._shadowColorStr;
context.shadowOffsetX = locShadowOffset.width;
context.shadowOffsetY = -locShadowOffset.height;
context.shadowBlur = this._shadowBlur;
}
context.textBaseline = cc.LabelTTF._textBaseline[locVAlignment];
context.textAlign = cc.LabelTTF._textAlign[locHAlignment];
var locContentWidth = this._contentSize.width - locStrokeShadowOffsetX;
if (locHAlignment === cc.TEXT_ALIGNMENT_RIGHT)
xOffset += locContentWidth;
else if (locHAlignment === cc.TEXT_ALIGNMENT_CENTER)
xOffset += locContentWidth / 2;
else
xOffset += 0;
if (this._isMultiLine) {
var locStrLen = this._strings.length;
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM)
yOffset = locFontHeight + locContentSizeHeight - locFontHeight * locStrLen;
else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_CENTER)
yOffset = locFontHeight / 2 + (locContentSizeHeight - locFontHeight * locStrLen) / 2;
for (var i = 0; i < locStrLen; i++) {
var line = this._strings[i];
var tmpOffsetY = -locContentSizeHeight + (locFontHeight * i) + yOffset;
if (locStrokeEnabled)
context.strokeText(line, xOffset, tmpOffsetY);
context.fillText(line, xOffset, tmpOffsetY);
}
} else {
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM) {
if (locStrokeEnabled)
context.strokeText(this._string, xOffset, yOffset);
context.fillText(this._string, xOffset, yOffset);
} else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_TOP) {
yOffset -= locContentSizeHeight ;
if (locStrokeEnabled)
context.strokeText(this._string, xOffset, yOffset);
context.fillText(this._string, xOffset, yOffset);
} else {
yOffset -= locContentSizeHeight * 0.5;
if (locStrokeEnabled)
context.strokeText(this._string, xOffset, yOffset);
context.fillText(this._string, xOffset, yOffset);
}
}
},
_getLabelContext:function () {
if (this._labelContext)
return this._labelContext;
if (!this._labelCanvas) {
var locCanvas = document.createElement("canvas");
var labelTexture = new cc.Texture2D();
labelTexture.initWithElement(locCanvas);
this.setTexture(labelTexture);
this._labelCanvas = locCanvas;
}
this._labelContext = this._labelCanvas.getContext("2d");
return this._labelContext;
},
_updateTTF: function () {
var locDimensionsWidth = this._dimensions.width, i, strLength;
var locLineWidth = this._lineWidths;
locLineWidth.length = 0;
this._isMultiLine = false ;
this._measureConfig();
if (locDimensionsWidth !== 0) {
// Content processing
var text = this._string;
this._strings = [];
for (i = 0, strLength = this._string.length; i < strLength;) {
// Find the index of next line
var next = this._checkNextline(text.substr(i), locDimensionsWidth);
var append = text.substr(i, next);
this._strings.push(append);
i += next;
}
} else {
this._strings = this._string.split('\n');
for (i = 0, strLength = this._strings.length; i < strLength; i++) {
locLineWidth.push(this._measure(this._strings[i]));
}
}
if (this._strings.length > 0)
this._isMultiLine = true;
var locSize, locStrokeShadowOffsetX = 0, locStrokeShadowOffsetY = 0;
if (this._strokeEnabled)
locStrokeShadowOffsetX = locStrokeShadowOffsetY = this._strokeSize * 2;
if (this._shadowEnabled) {
var locOffsetSize = this._shadowOffset;
locStrokeShadowOffsetX += Math.abs(locOffsetSize.width) * 2;
locStrokeShadowOffsetY += Math.abs(locOffsetSize.height) * 2;
}
//get offset for stroke and shadow
if (locDimensionsWidth === 0) {
if (this._isMultiLine)
locSize = cc.size(0 | (Math.max.apply(Math, locLineWidth) + locStrokeShadowOffsetX),
0 | ((this._fontClientHeight * this._strings.length) + locStrokeShadowOffsetY));
else
locSize = cc.size(0 | (this._measure(this._string) + locStrokeShadowOffsetX), 0 | (this._fontClientHeight + locStrokeShadowOffsetY));
} else {
if (this._dimensions.height === 0) {
if (this._isMultiLine)
locSize = cc.size(0 | (locDimensionsWidth + locStrokeShadowOffsetX), 0 | ((this._fontClientHeight * this._strings.length) + locStrokeShadowOffsetY));
else
locSize = cc.size(0 | (locDimensionsWidth + locStrokeShadowOffsetX), 0 | (this._fontClientHeight + locStrokeShadowOffsetY));
} else {
//dimension is already set, contentSize must be same as dimension
locSize = cc.size(0 | (locDimensionsWidth + locStrokeShadowOffsetX), 0 | (this._dimensions.height + locStrokeShadowOffsetY));
}
}
this.setContentSize(locSize);
this._strokeShadowOffsetX = locStrokeShadowOffsetX;
this._strokeShadowOffsetY = locStrokeShadowOffsetY;
// need computing _anchorPointInPoints
var locAP = this._anchorPoint;
this._anchorPointInPoints.x = (locStrokeShadowOffsetX * 0.5) + ((locSize.width - locStrokeShadowOffsetX) * locAP.x);
this._anchorPointInPoints.y = (locStrokeShadowOffsetY * 0.5) + ((locSize.height - locStrokeShadowOffsetY) * locAP.y);
},
getContentSize:function(){
if(this._needUpdateTexture)
this._updateTTF();
return cc.Sprite.prototype.getContentSize.call(this);
},
_updateTexture:function () {
var locContext = this._getLabelContext(), locLabelCanvas = this._labelCanvas;
var locContentSize = this._contentSize;
if(this._string.length === 0){
locLabelCanvas.width = 1;
locLabelCanvas.height = locContentSize.height;
this.setTextureRect(cc.rect(0, 0, 1, locContentSize.height));
return true;
}
//set size for labelCanvas
locContext.font = this._fontStyleStr;
this._updateTTF();
var width = locContentSize.width, height = locContentSize.height;
var flag = locLabelCanvas.width == width && locLabelCanvas.height == height;
locLabelCanvas.width = width;
locLabelCanvas.height = height;
if(flag) locContext.clearRect(0, 0, width, height);
//draw text to labelCanvas
this._drawTTFInCanvas(locContext);
this._texture.handleLoadedTexture();
this.setTextureRect(cc.rect(0, 0, width, height));
return true;
},
visit:function(ctx){
if(!this._string || this._string == "")
return;
if(this._needUpdateTexture ){
this._needUpdateTexture = false;
this._updateTexture();
}
var context = ctx || cc.renderContext;
cc.Sprite.prototype.visit.call(this,context);
},
draw: null,
/**
* draw sprite to canvas
* @param {WebGLRenderingContext} ctx 3d context of canvas
*/
_drawForWebGL: function (ctx) {
if (!this._string || this._string == "")
return;
var gl = ctx || cc.renderContext, locTexture = this._texture;
if (locTexture && locTexture._isLoaded) {
this._shaderProgram.use();
this._shaderProgram.setUniformForModelViewAndProjectionMatrixWithMat4();
cc.glBlendFunc(this._blendFunc.src, this._blendFunc.dst);
cc.glBindTexture2D(locTexture);
cc.glEnableVertexAttribs(cc.VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);
gl.bindBuffer(gl.ARRAY_BUFFER, this._quadWebBuffer);
if (this._quadDirty) {
gl.bufferData(gl.ARRAY_BUFFER, this._quad.arrayBuffer, gl.STATIC_DRAW);
this._quadDirty = false;
}
gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 24, 0);
gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16);
gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
if (cc.SPRITE_DEBUG_DRAW === 1) {
// draw bounding box
var locQuad = this._quad;
var verticesG1 = [
cc.p(locQuad.tl.vertices.x, locQuad.tl.vertices.y),
cc.p(locQuad.bl.vertices.x, locQuad.bl.vertices.y),
cc.p(locQuad.br.vertices.x, locQuad.br.vertices.y),
cc.p(locQuad.tr.vertices.x, locQuad.tr.vertices.y)
];
cc.drawingUtil.drawPoly(verticesG1, 4, true);
} else if (cc.SPRITE_DEBUG_DRAW === 2) {
// draw texture box
var drawSizeG2 = this.getTextureRect()._size;
var offsetPixG2 = this.getOffsetPosition();
var verticesG2 = [cc.p(offsetPixG2.x, offsetPixG2.y), cc.p(offsetPixG2.x + drawSizeG2.width, offsetPixG2.y),
cc.p(offsetPixG2.x + drawSizeG2.width, offsetPixG2.y + drawSizeG2.height), cc.p(offsetPixG2.x, offsetPixG2.y + drawSizeG2.height)];
cc.drawingUtil.drawPoly(verticesG2, 4, true);
} // CC_SPRITE_DEBUG_DRAW
cc.g_NumberOfDraws++;
},
_setTextureRectForCanvas: function (rect, rotated, untrimmedSize) {
this._rectRotated = rotated || false;
untrimmedSize = untrimmedSize || rect._size;
this.setContentSize(untrimmedSize);
this.setVertexRect(rect);
var locTextureCoordRect = this._textureRect_Canvas;
locTextureCoordRect.x = rect.x;
locTextureCoordRect.y = rect.y;
locTextureCoordRect.width = rect.width;
locTextureCoordRect.height = rect.height;
locTextureCoordRect.validRect = !(locTextureCoordRect.width === 0 || locTextureCoordRect.height === 0
|| locTextureCoordRect.x < 0 || locTextureCoordRect.y < 0);
var relativeOffset = this._unflippedOffsetPositionFromCenter;
if (this._flippedX)
relativeOffset.x = -relativeOffset.x;
if (this._flippedY)
relativeOffset.y = -relativeOffset.y;
this._offsetPosition.x = relativeOffset.x + (this._contentSize.width - this._rect.width) / 2;
this._offsetPosition.y = relativeOffset.y + (this._contentSize.height - this._rect.height) / 2;
// rendering using batch node
if (this._batchNode) {
this._dirty = true;
}
},
_setTextureCoords:function (rect) {
var tex = this._batchNode ? this._textureAtlas.getTexture() : this._texture;
if (!tex)
return;
var atlasWidth = tex.getPixelsWide();
var atlasHeight = tex.getPixelsHigh();
var left, right, top, bottom, tempSwap, locQuad = this._quad;
if (this._rectRotated) {
if (cc.FIX_ARTIFACTS_BY_STRECHING_TEXEL) {
left = (2 * rect.x + 1) / (2 * atlasWidth);
right = left + (rect.height * 2 - 2) / (2 * atlasWidth);
top = (2 * rect.y + 1) / (2 * atlasHeight);
bottom = top + (rect.width * 2 - 2) / (2 * atlasHeight);
} else {
left = rect.x / atlasWidth;
right = (rect.x + rect.height) / atlasWidth;
top = rect.y / atlasHeight;
bottom = (rect.y + rect.width) / atlasHeight;
}// CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
if (this._flippedX) {
tempSwap = top;
top = bottom;
bottom = tempSwap;
}
if (this._flippedY) {
tempSwap = left;
left = right;
right = tempSwap;
}
locQuad.bl.texCoords.u = left;
locQuad.bl.texCoords.v = top;
locQuad.br.texCoords.u = left;
locQuad.br.texCoords.v = bottom;
locQuad.tl.texCoords.u = right;
locQuad.tl.texCoords.v = top;
locQuad.tr.texCoords.u = right;
locQuad.tr.texCoords.v = bottom;
} else {
if (cc.FIX_ARTIFACTS_BY_STRECHING_TEXEL) {
left = (2 * rect.x + 1) / (2 * atlasWidth);
right = left + (rect.width * 2 - 2) / (2 * atlasWidth);
top = (2 * rect.y + 1) / (2 * atlasHeight);
bottom = top + (rect.height * 2 - 2) / (2 * atlasHeight);
} else {
left = rect.x / atlasWidth;
right = (rect.x + rect.width) / atlasWidth;
top = rect.y / atlasHeight;
bottom = (rect.y + rect.height) / atlasHeight;
} // ! CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
if (this._flippedX) {
tempSwap = left;
left = right;
right = tempSwap;
}
if (this._flippedY) {
tempSwap = top;
top = bottom;
bottom = tempSwap;
}
locQuad.bl.texCoords.u = left;
locQuad.bl.texCoords.v = bottom;
locQuad.br.texCoords.u = right;
locQuad.br.texCoords.v = bottom;
locQuad.tl.texCoords.u = left;
locQuad.tl.texCoords.v = top;
locQuad.tr.texCoords.u = right;
locQuad.tr.texCoords.v = top;
}
this._quadDirty = true;
}
});
if(cc.Browser.supportWebGL){
cc.LabelTTF.prototype.setColor = cc.Sprite.prototype.setColor;
cc.LabelTTF.prototype._setColorsString = cc.LabelTTF.prototype._setColorsStringForWebGL;
cc.LabelTTF.prototype.updateDisplayedColor = cc.Sprite.prototype.updateDisplayedColor;
cc.LabelTTF.prototype.setOpacity = cc.Sprite.prototype.setOpacity;
cc.LabelTTF.prototype.updateDisplayedOpacity = cc.Sprite.prototype.updateDisplayedOpacity;
cc.LabelTTF.prototype.initWithStringAndTextDefinition = cc.LabelTTF.prototype._initWithStringAndTextDefinitionForWebGL;
cc.LabelTTF.prototype.setFontFillColor = cc.LabelTTF.prototype._setFontFillColorForWebGL;
cc.LabelTTF.prototype.draw = cc.LabelTTF.prototype._drawForWebGL;
cc.LabelTTF.prototype.setTextureRect = cc.Sprite.prototype._setTextureRectForWebGL;
} else {
cc.LabelTTF.prototype.setColor = cc.LabelTTF.prototype._setColorForCanvas;
cc.LabelTTF.prototype._setColorsString = cc.LabelTTF.prototype._setColorsStringForCanvas;
cc.LabelTTF.prototype.updateDisplayedColor = cc.LabelTTF.prototype._updateDisplayedColorForCanvas;
cc.LabelTTF.prototype.setOpacity = cc.LabelTTF.prototype._setOpacityForCanvas;
cc.LabelTTF.prototype.updateDisplayedOpacity = cc.LabelTTF.prototype._updateDisplayedOpacityForCanvas;
cc.LabelTTF.prototype.initWithStringAndTextDefinition = cc.LabelTTF.prototype._initWithStringAndTextDefinitionForCanvas;
cc.LabelTTF.prototype.setFontFillColor = cc.LabelTTF.prototype._setFontFillColorForCanvas;
cc.LabelTTF.prototype.draw = cc.Sprite.prototype.draw;
cc.LabelTTF.prototype.setTextureRect = cc.LabelTTF.prototype._setTextureRectForCanvas;
}
cc.LabelTTF._textAlign = ["left", "center", "right"];
cc.LabelTTF._textBaseline = ["top", "middle", "bottom"];
// Class static properties for measure util
cc.LabelTTF._checkRegEx = /(.+?)([\s\n\r\-\/\\\:]|[\u4E00-\u9FA5]|[\uFE30-\uFFA0])/;
cc.LabelTTF._reverseCheckRegEx = /(.*)([\s\n\r\-\/\\\:]|[\u4E00-\u9FA5]|[\uFE30-\uFFA0])/;
cc.LabelTTF._checkEnRegEx = /[\s\-\/\\\:]/;
/**
* creates a cc.LabelTTF from a font name, alignment, dimension and font size
* @param {String} label
* @param {String} fontName
* @param {Number} fontSize
* @param {cc.Size} [dimensions=cc.SIZE_ZERO]
* @param {Number} [hAlignment=]
* @param {Number} [vAlignment=cc.VERTICAL_TEXT_ALIGNMENT_TOP]
* @return {cc.LabelTTF|Null}
* @example
* // Example
* var myLabel = cc.LabelTTF.create('label text', 'Times New Roman', 32, cc.size(32,16), cc.TEXT_ALIGNMENT_LEFT);
*/
cc.LabelTTF.create = function (label, fontName, fontSize, dimensions, hAlignment, vAlignment) {
var ret = new cc.LabelTTF();
if (ret.initWithString(label, fontName, fontSize, dimensions, hAlignment, vAlignment))
return ret;
return null;
};
/**
* Create a label with string and a font definition
* @param {String} text
* @param {cc.FontDefinition} textDefinition
* @return {cc.LabelTTF|Null}
*/
cc.LabelTTF.createWithFontDefinition = function(text, textDefinition){
var ret = new cc.LabelTTF();
if(ret && ret.initWithStringAndTextDefinition(text, textDefinition))
return ret;
return null;
};
if(cc.USE_LA88_LABELS)
cc.LabelTTF._SHADER_PROGRAM = cc.SHADER_POSITION_TEXTURECOLOR;
else
cc.LabelTTF._SHADER_PROGRAM = cc.SHADER_POSITION_TEXTUREA8COLOR;
cc.LabelTTF.__labelHeightDiv = document.createElement("div");
cc.LabelTTF.__labelHeightDiv.style.fontFamily = "Arial";
cc.LabelTTF.__labelHeightDiv.style.position = "absolute";
cc.LabelTTF.__labelHeightDiv.style.left = "-100px";
cc.LabelTTF.__labelHeightDiv.style.top = "-100px";
cc.LabelTTF.__labelHeightDiv.style.lineHeight = "normal";
document.body.appendChild(cc.LabelTTF.__labelHeightDiv);
cc.LabelTTF.__getFontHeightByDiv = function(fontName, fontSize){
var clientHeight = cc.LabelTTF.__fontHeightCache[fontName + "." + fontSize];
if (clientHeight > 0) return clientHeight;
var labelDiv = cc.LabelTTF.__labelHeightDiv;
labelDiv.innerHTML = "ajghl~!";
labelDiv.style.fontFamily = fontName;
labelDiv.style.fontSize = fontSize + "px";
clientHeight = labelDiv.clientHeight ;
cc.LabelTTF.__fontHeightCache[fontName + "." + fontSize] = clientHeight;
labelDiv.innerHTML = "";
return clientHeight;
};
cc.LabelTTF.__fontHeightCache = {};