Your IP : 216.73.216.43
/**
* 多边形
* @module zrender/shape/Polygon
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
* @example
* var Polygon = require('zrender/shape/Polygon');
* var shape = new Polygon({
* style: {
* // 100x100的正方形
* pointList: [[0, 0], [100, 0], [100, 100], [0, 100]],
* color: 'blue'
* }
* });
* zr.addShape(shape);
*/
/**
* @typedef {Object} IPolygonStyle
* @property {string} pointList 多边形顶点数组
* @property {string} [smooth=''] 是否做平滑插值, 平滑算法可以选择 bezier, spline
* @property {number} [smoothConstraint] 平滑约束
* @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 Base = require('./Base');
var smoothSpline = require('./util/smoothSpline');
var smoothBezier = require('./util/smoothBezier');
var dashedLineTo = require('./util/dashedLineTo');
/**
* @alias module:zrender/shape/Polygon
* @param {Object} options
* @constructor
* @extends module:zrender/shape/Base
*/
var Polygon = function (options) {
Base.call(this, options);
/**
* 多边形绘制样式
* @name module:zrender/shape/Polygon#style
* @type {module:zrender/shape/Polygon~IPolygonStyle}
*/
/**
* 多边形高亮绘制样式
* @name module:zrender/shape/Polygon#highlightStyle
* @type {module:zrender/shape/Polygon~IPolygonStyle}
*/
};
Polygon.prototype = {
type: 'polygon',
/**
* 创建多边形路径
* @param {CanvasRenderingContext2D} ctx
* @param {module:zrender/shape/Polygon~IPolygonStyle} style
*/
buildPath : function (ctx, style) {
// 虽然能重用brokenLine，但底层图形基于性能考虑，重复代码减少调用吧
var pointList = style.pointList;
// 开始点和结束点重复
/*
var start = pointList[0];
var end = pointList[pointList.length-1];
if (start && end) {
if (start[0] == end[0] &&
start[1] == end[1]) {
// 移除最后一个点
pointList.pop();
}
}
*/
if (pointList.length < 2) {
// 少于2个点就不画了~
return;
}
if (style.smooth && style.smooth !== 'spline') {
var controlPoints = smoothBezier(
pointList, style.smooth, true, style.smoothConstraint
);
ctx.moveTo(pointList[0][0], pointList[0][1]);
var cp1;
var cp2;
var p;
var len = pointList.length;
for (var i = 0; i < len; i++) {
cp1 = controlPoints[i * 2];
cp2 = controlPoints[i * 2 + 1];
p = pointList[(i + 1) % len];
ctx.bezierCurveTo(
cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
);
}
}
else {
if (style.smooth === 'spline') {
pointList = smoothSpline(pointList, true);
}
if (!style.lineType || style.lineType == 'solid') {
// 默认为实线
ctx.moveTo(pointList[0][0], pointList[0][1]);
for (var i = 1, l = pointList.length; i < l; i++) {
ctx.lineTo(pointList[i][0], pointList[i][1]);
}
ctx.lineTo(pointList[0][0], pointList[0][1]);
}
else if (style.lineType == 'dashed'
|| style.lineType == 'dotted'
) {
var dashLength =
style._dashLength
|| (style.lineWidth || 1)
* (style.lineType == 'dashed' ? 5 : 1);
style._dashLength = dashLength;
ctx.moveTo(pointList[0][0], pointList[0][1]);
for (var i = 1, l = pointList.length; i < l; i++) {
dashedLineTo(
ctx,
pointList[i - 1][0], pointList[i - 1][1],
pointList[i][0], pointList[i][1],
dashLength
);
}
dashedLineTo(
ctx,
pointList[pointList.length - 1][0],
pointList[pointList.length - 1][1],
pointList[0][0],
pointList[0][1],
dashLength
);
}
}
ctx.closePath();
return;
},
/**
* 计算返回多边形包围盒矩阵
* @param {module:zrender/shape/Polygon~IPolygonStyle} style
* @return {module:zrender/shape/Base~IBoundingRect}
*/
getRect : function (style) {
if (style.__rect) {
return style.__rect;
}
var minX = Number.MAX_VALUE;
var maxX = Number.MIN_VALUE;
var minY = Number.MAX_VALUE;
var maxY = Number.MIN_VALUE;
var pointList = style.pointList;
for (var i = 0, l = pointList.length; i < l; i++) {
if (pointList[i][0] < minX) {
minX = pointList[i][0];
}
if (pointList[i][0] > maxX) {
maxX = pointList[i][0];
}
if (pointList[i][1] < minY) {
minY = pointList[i][1];
}
if (pointList[i][1] > maxY) {
maxY = pointList[i][1];
}
}
var lineWidth;
if (style.brushType == 'stroke' || style.brushType == 'fill') {
lineWidth = style.lineWidth || 1;
}
else {
lineWidth = 0;
}
style.__rect = {
x : Math.round(minX - lineWidth / 2),
y : Math.round(minY - lineWidth / 2),
width : maxX - minX + lineWidth,
height : maxY - minY + lineWidth
};
return style.__rect;
}
};
require('../tool/util').inherits(Polygon, Base);
return Polygon;
}
);