Your IP : 216.73.216.43
/**
* @module zrender/shape/Text
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
* @example
* var Text = require('zrender/shape/Text');
* var shape = new Text({
* style: {
* text: 'Label',
* x: 100,
* y: 100,
* textFont: '14px Arial'
* }
* });
* zr.addShape(shape);
*/
/**
* @typedef {Object} ITextStyle
* @property {number} x 横坐标
* @property {number} y 纵坐标
* @property {string} text 文本内容
* @property {number} [maxWidth=null] 最大宽度限制
* @property {string} [textFont] 附加文本样式，eg:'bold 18px verdana'
* @property {string} [textAlign] 可以是start, end, left, right, center
* @property {string} [textBaseline] 默认根据textPosition自动设置，附加文本垂直对齐。
* 可以是top, bottom, middle, alphabetic, hanging, ideographic
* @property {string} [brushType='fill']
* @property {string} [color='#000000'] 填充颜色
* @property {string} [strokeColor='#000000'] 描边颜色
* @property {number} [lineWidth=1] 描边宽度
* @property {number} [opacity=1] 绘制透明度
* @property {number} [shadowBlur=0] 阴影模糊度，大于0有效
* @property {string} [shadowColor='#000000'] 阴影颜色
* @property {number} [shadowOffsetX=0] 阴影横向偏移
* @property {number} [shadowOffsetY=0] 阴影纵向偏移
*/
define(
function (require) {
var area = require('../tool/area');
var Base = require('./Base');
/**
* @alias module:zrender/shape/Text
* @constructor
* @extends module:zrender/shape/Base
* @param {Object} options
*/
var Text = function (options) {
Base.call(this, options);
/**
* 文字绘制样式
* @name module:zrender/shape/Text#style
* @type {module:zrender/shape/Text~ITextStyle}
*/
/**
* 文字高亮绘制样式
* @name module:zrender/shape/Text#highlightStyle
* @type {module:zrender/shape/Text~ITextStyle}
*/
};
Text.prototype = {
type: 'text',
brush : function (ctx, isHighlight) {
var style = this.style;
if (isHighlight) {
// 根据style扩展默认高亮样式
style = this.getHighlightStyle(
style, this.highlightStyle || {}
);
}
if (typeof(style.text) == 'undefined' || style.text === false) {
return;
}
ctx.save();
this.doClip(ctx);
this.setContext(ctx, style);
// 设置transform
this.setTransform(ctx);
if (style.textFont) {
ctx.font = style.textFont;
}
ctx.textAlign = style.textAlign || 'start';
ctx.textBaseline = style.textBaseline || 'middle';
var text = (style.text + '').split('\n');
var lineHeight = area.getTextHeight('国', style.textFont);
var rect = this.getRect(style);
var x = style.x;
var y;
if (style.textBaseline == 'top') {
y = rect.y;
}
else if (style.textBaseline == 'bottom') {
y = rect.y + lineHeight;
}
else {
y = rect.y + lineHeight / 2;
}
for (var i = 0, l = text.length; i < l; i++) {
if (style.maxWidth) {
switch (style.brushType) {
case 'fill':
ctx.fillText(
text[i],
x, y, style.maxWidth
);
break;
case 'stroke':
ctx.strokeText(
text[i],
x, y, style.maxWidth
);
break;
case 'both':
ctx.fillText(
text[i],
x, y, style.maxWidth
);
ctx.strokeText(
text[i],
x, y, style.maxWidth
);
break;
default:
ctx.fillText(
text[i],
x, y, style.maxWidth
);
}
}
else {
switch (style.brushType) {
case 'fill':
ctx.fillText(text[i], x, y);
break;
case 'stroke':
ctx.strokeText(text[i], x, y);
break;
case 'both':
ctx.fillText(text[i], x, y);
ctx.strokeText(text[i], x, y);
break;
default:
ctx.fillText(text[i], x, y);
}
}
y += lineHeight;
}
ctx.restore();
return;
},
/**
* 返回文字包围盒矩形
* @param {module:zrender/shape/Text~ITextStyle} style
* @return {module:zrender/shape/Base~IBoundingRect}
*/
getRect : function (style) {
if (style.__rect) {
return style.__rect;
}
var width = area.getTextWidth(style.text, style.textFont);
var height = area.getTextHeight(style.text, style.textFont);
var textX = style.x; // 默认start == left
if (style.textAlign == 'end' || style.textAlign == 'right') {
textX -= width;
}
else if (style.textAlign == 'center') {
textX -= (width / 2);
}
var textY;
if (style.textBaseline == 'top') {
textY = style.y;
}
else if (style.textBaseline == 'bottom') {
textY = style.y - height;
}
else {
// middle
textY = style.y - height / 2;
}
style.__rect = {
x : textX,
y : textY,
width : width,
height : height
};
return style.__rect;
}
};
require('../tool/util').inherits(Text, Base);
return Text;
}
);