/** * 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; });