import Polyline from 'zrender/src/graphic/shape/Polyline'; import Group from 'zrender/src/container/Group'; import Polygon from 'zrender/src/graphic/shape/Polygon'; class ESigPost extends Group { constructor(model) { super(); this.model = model; this.create(); } create() { const model = this.model; const style = this.model.style; // 竖杆 this.ver = new Polyline({ _subType: 'SignalLamp', _val: '3', zlevel: model.zlevel, z: model.z, shape: { points: [ [model.x, model.y + style.Signal.post.standardHeight * 1.2], [model.x, model.y - style.Signal.post.standardHeight * 1.2] ] }, style: { lineWidth: style.Signal.post.standardWidth, stroke: style.Signal.post.standardColor } }); // 横杆 this.hor = new Polyline({ zlevel: model.zlevel, z: model.z, shape: { points: [ [model.x, model.y], [model.x + model.drict * style.Signal.post.standardLength * 1.2, model.y] ] }, style: { lineWidth: style.Signal.post.standardWidth, stroke: style.Signal.post.standardColor } }); this.add(this.ver); this.add(this.hor); model.type === '01' ? this.hor.hide() : this.hor.show(); if (style.Signal.post.standardShow) { this.hor.show(); } } setColor(color) { if (color) { this.ver && this.ver.setStyle({ stroke: color }); this.hor && this.hor.setStyle({ stroke: color }); } } /* 灯柱变换为三角形并闪烁*/ setTerminalOptional() { this.triangle = new Polygon({ zlevel: this.model.zlevel, z: this.model.z, shape: { points: [ [this.model.x, this.model.y + this.model.style.Signal.post.standardHeight * 1.2], [this.model.x, this.model.y - this.model.style.Signal.post.standardHeight * 1.2], [this.model.x + this.model.drict * this.model.style.Signal.post.standardLength * 1.2, this.model.y] ] }, style: { fill: this.model.style.Signal.post.terminalOptional } }); this.add(this.triangle); this.triangle.animateStyle(true) .when(0, { fill: this.model.style.backgroundColor }) .when(1000, { fill: this.model.style.Signal.post.terminalOptional }) .when(2000, { fill: this.model.style.backgroundColor }) .start(); this.ver.hide(); this.hor.hide(); console.log('222222222222222', this.triangle); } /* 关闭闪烁三角形并还原灯柱 */ removeTerminalOptional() { this.triangle && this.triangle.stopAnimation(false); this.triangle && this.remove(this.triangle); this.ver.show(); this.hor.show(); } getLampPosition(type) { const model = this.model; const style = this.model.style; if (style.Signal.post.standardShow) { type = '01'; } const length = style.Signal.post.standardShow ? 4 : 0; if (type === '01') { return { x: model.x + model.drict * style.Signal.lamp.radiusR * 3 / 2 + model.drict * length, y: model.y }; } else { return { x: this.hor.shape.points[1][0] + model.drict * style.Signal.lamp.radiusR + model.drict * length, y: this.hor.shape.points[1][1] }; } } } export default ESigPost;