static/js/dncp/util/shape/Chain.js
/**
* zrender
*
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
*
* shape类:时间轴线
*/
define(function (require) {
var Base = require('zrender/shape/Base');
var IconShape = require('./Icon');
var dashedLineTo = require('zrender/shape/util/dashedLineTo');
var zrUtil = require('zrender/tool/util');
var matrix = require('zrender/tool/matrix');
function Chain(options) {
Base.call(this, options);
}
Chain.prototype = {
type : 'chain',
/**
* 画刷
* @param ctx 画布句柄
* @param e 形状实体
* @param isHighlight 是否为高亮状态
* @param updateCallback 需要异步加载资源的shape可以通过这个callback(e)
* 让painter更新视图,base.brush没用,需要的话重载brush
*/
brush : function (ctx, isHighlight) {
var style = this.style;
if (isHighlight) {
// 根据style扩展默认高亮样式
style = this.getHighlightStyle(
style,
this.highlightStyle || {}
);
}
ctx.save();
this.setContext(ctx, style);
// 设置transform
this.setTransform(ctx);
ctx.save();
ctx.beginPath();
this.buildLinePath(ctx, style);
ctx.stroke();
ctx.restore();
this.brushSymbol(ctx, style);
ctx.restore();
return;
},
/**
* 创建线条路径
* @param {Context2D} ctx Canvas 2D上下文
* @param {Object} style 样式
*/
buildLinePath : function (ctx, style) {
var x = style.x;
var y = style.y + 5;
var width = style.width;
var height = style.height / 2 - 10;
ctx.moveTo(x, y);
ctx.lineTo(x, y + height);
ctx.moveTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.moveTo(x, y + height / 2);
if (!style.lineType || style.lineType == 'solid') {
ctx.lineTo(x + width, y + height / 2);
}
else if (style.lineType == 'dashed' || style.lineType == 'dotted') {
var dashLength = (style.lineWidth || 1)
* (style.lineType == 'dashed' ? 5 : 1);
dashedLineTo(ctx, x, y + height / 2, x + width, y + height / 2, dashLength);
}
},
/**
* 标线始末标注
*/
brushSymbol : function (ctx, style) {
var y = style.y + style.height / 4;
ctx.save();
var chainPoint = style.chainPoint;
var curPoint;
for (var idx = 0, l = chainPoint.length; idx < l; idx++) {
curPoint = chainPoint[idx];
if (curPoint.symbol != 'none') {
ctx.beginPath();
var symbolSize = curPoint.symbolSize;
IconShape.prototype.buildPath(
ctx,
{
iconType : curPoint.symbol,
x : curPoint.x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
n : curPoint.n
}
);
ctx.fillStyle = curPoint.isEmpty ? '#fff' : style.strokeColor;
ctx.closePath();
ctx.fill();
ctx.stroke();
}
if (curPoint.showLabel) {
ctx.font = curPoint.textFont;
ctx.fillStyle = curPoint.textColor;
ctx.textAlign = curPoint.textAlign;
ctx.textBaseline = curPoint.textBaseline;
if (curPoint.rotation) {
ctx.save();
this._updateTextTransform(ctx, curPoint.rotation);
ctx.fillText(curPoint.name, curPoint.textX, curPoint.textY);
ctx.restore();
}
else {
ctx.fillText(curPoint.name, curPoint.textX, curPoint.textY);
}
}
}
ctx.restore();
},
_updateTextTransform : function (ctx, rotation) {
var _transform = matrix.create();
matrix.identity(_transform);
if (rotation[0] !== 0) {
var originX = rotation[1] || 0;
var originY = rotation[2] || 0;
if (originX || originY) {
matrix.translate(
_transform, _transform, [-originX, -originY]
);
}
matrix.rotate(_transform, _transform, rotation[0]);
if (originX || originY) {
matrix.translate(
_transform, _transform, [originX, originY]
);
}
}
// 保存这个变换矩阵
ctx.transform.apply(ctx, _transform);
},
isCover : function (x, y) {
var rect = this.style;
if (x >= rect.x
&& x <= (rect.x + rect.width)
&& y >= rect.y
&& y <= (rect.y + rect.height)
) {
// 矩形内
return true;
}
else {
return false;
}
}
};
zrUtil.inherits(Chain, Base);
return Chain;
});