| Current Path : /home/cbequiperp/www/components/com_flexicontent/librairies/zrender/shape/ |
| Current File : /home/cbequiperp/www/components/com_flexicontent/librairies/zrender/shape/Star.js |
/**
* n角星(n>3)
* @module zrender/shape/Star
* @author sushuang (宿爽, sushuang0322@gmail.com)
* @example
* var Star = require('zrender/shape/Star');
* var shape = new Star({
* style: {
* x: 200,
* y: 100,
* r: 150,
* n: 5,
* text: '五角星'
* }
* });
* zr.addShape(shape);
*/
/**
* @typedef {Object} IStarStyle
* @property {number} x n角星外接圆心x坐标
* @property {number} y n角星外接圆心y坐标
* @property {number} r n角星外接圆半径
* @property {number} [r0] n角星内部顶点(凹点)的外接圆半径。
* 如果不指定此参数,则自动计算:取相隔外部顶点连线的交点作内部顶点。
* @property {number} n 指明几角星
* @property {string} [brushType='fill']
* @property {string} [color='#000000'] 填充颜色
* @property {string} [strokeColor='#000000'] 描边颜色
* @property {string} [lineCape='butt'] 线帽样式,可以是 butt, round, square
* @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] 阴影纵向偏移
* @property {string} [text] 图形中的附加文本
* @property {string} [textColor='#000000'] 文本颜色
* @property {string} [textFont] 附加文本样式,eg:'bold 18px verdana'
* @property {string} [textPosition='end'] 附加文本位置, 可以是 inside, left, right, top, bottom
* @property {string} [textAlign] 默认根据textPosition自动设置,附加文本水平对齐。
* 可以是start, end, left, right, center
* @property {string} [textBaseline] 默认根据textPosition自动设置,附加文本垂直对齐。
* 可以是top, bottom, middle, alphabetic, hanging, ideographic
*/
define(
function (require) {
var math = require('../tool/math');
var sin = math.sin;
var cos = math.cos;
var PI = Math.PI;
var Base = require('./Base');
/**
* @alias module:zrender/shape/Star
* @param {Object} options
* @constructor
* @extends module:zrender/shape/Base
*/
var Star = function(options) {
Base.call(this, options);
/**
* n角星绘制样式
* @name module:zrender/shape/Star#style
* @type {module:zrender/shape/Star~IStarStyle}
*/
/**
* n角星高亮绘制样式
* @name module:zrender/shape/Star#highlightStyle
* @type {module:zrender/shape/Star~IStarStyle}
*/
};
Star.prototype = {
type: 'star',
/**
* 创建n角星(n>3)路径
* @param {CanvasRenderingContext2D} ctx
* @param {module:zrender/shape/Star~IStarStyle} style
*/
buildPath : function(ctx, style) {
var n = style.n;
if (!n || n < 2) {
return;
}
var x = style.x;
var y = style.y;
var r = style.r;
var r0 = style.r0;
// 如果未指定内部顶点外接圆半径,则自动计算
if (r0 == null) {
r0 = n > 4
// 相隔的外部顶点的连线的交点,
// 被取为内部交点,以此计算r0
? r * cos(2 * PI / n) / cos(PI / n)
// 二三四角星的特殊处理
: r / 3;
}
var dStep = PI / n;
var deg = -PI / 2;
var xStart = x + r * cos(deg);
var yStart = y + r * sin(deg);
deg += dStep;
// 记录边界点,用于判断inside
var pointList = style.pointList = [];
pointList.push([ xStart, yStart ]);
for (var i = 0, end = n * 2 - 1, ri; i < end; i++) {
ri = i % 2 === 0 ? r0 : r;
pointList.push([ x + ri * cos(deg), y + ri * sin(deg) ]);
deg += dStep;
}
pointList.push([ xStart, yStart ]);
// 绘制
ctx.moveTo(pointList[0][0], pointList[0][1]);
for (var i = 0; i < pointList.length; i++) {
ctx.lineTo(pointList[i][0], pointList[i][1]);
}
ctx.closePath();
return;
},
/**
* 返回n角星包围盒矩形
* @param {module:zrender/shape/Star~IStarStyle} style
* @return {module:zrender/shape/Base~IBoundingRect}
*/
getRect : function(style) {
if (style.__rect) {
return style.__rect;
}
var lineWidth;
if (style.brushType == 'stroke' || style.brushType == 'fill') {
lineWidth = style.lineWidth || 1;
}
else {
lineWidth = 0;
}
style.__rect = {
x : Math.round(style.x - style.r - lineWidth / 2),
y : Math.round(style.y - style.r - lineWidth / 2),
width : style.r * 2 + lineWidth,
height : style.r * 2 + lineWidth
};
return style.__rect;
}
};
require('../tool/util').inherits(Star, Base);
return Star;
}
);