joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整道岔绘画方式，兼容哈尔滨线路道岔绘制方法

Browse Source
This commit is contained in:
joylink_zyy 2020-02-04 14:28:18 +08:00
parent e598f8bfcf
commit 732c80ca6d
4 changed files with 177 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/jmapNew/config/skinCode/haerbin_01.js
View File

@ -341,6 +341,7 @@ class SkinCode extends defaultStyle {
monolockColor: '#870E10' // 道岔单锁颜色 monolockColor: '#870E10' // 道岔单锁颜色
}, },
core: { core: {
splice: true, // 哈尔滨特殊显示
length: 6 // 道岔单边长度 length: 6 // 道岔单边长度
}, },
block: { // 道岔封锁配置 block: { // 道岔封锁配置

50
src/jmapNew/shape/Switch/ERhomboid.js Normal file
View File

@ -0,0 +1,50 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
class ERhomboid extends Group {
constructor(model) {
super();
this.model = model;
this.create();
}
create() {
const model = this.model;
const style = this.model.style;
this.section = new Polygon({ // 平行四边形
zlevel: model.zlevel,
z: model.z + 1,
shape: {
points: model.sectionPoints
},
style: {
fill: style.Section.line.spareColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
this.hide();
this.add(this.section);
}
hide() {
this.section.hide();
}
show() {
this.section.show();
}
stopAnimation(flag) {
this.section.stopAnimation(flag);
}
getSection() {
return this.section;
}
}
export default ERhomboid;

37
src/jmapNew/shape/Switch/ESwLnversion.js
View File

@ -11,7 +11,7 @@ class ESwLnversion extends Group {
create() { create() {
const model = this.model; const model = this.model;
const style = this.model.style; const style = this.model.style;
this.relocShelter = new Polygon({ this.relocShelter = new Polygon({ // 遮盖B区段范围
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
shape: { shape: {
@ -27,37 +27,38 @@ class ESwLnversion extends Group {
const rpx = Math.abs(model.triangle.getCos(model.halfWidth)) + 0.2; const rpx = Math.abs(model.triangle.getCos(model.halfWidth)) + 0.2;
this.relocShelter.position = [-model.triangle.drictx * rpx, -model.triangle.dricty * 0.2]; this.relocShelter.position = [-model.triangle.drictx * rpx, -model.triangle.dricty * 0.2];
this.section = new Polygon({ // this.section = new Polygon({ // 平行四边形
zlevel: model.zlevel, // zlevel: model.zlevel,
z: model.z + 1, // z: model.z + 1,
shape: { // shape: {
points: model.sectionPoints // points: model.sectionPoints
}, // },
style: { // style: {
fill: style.Section.line.spareColor // // fill: style.Section.line.spareColor
}, // fill: 'blue'
cursor: model.cursor, // },
onmouseover: model.onmouseover, // cursor: model.cursor,
onmouseout: model.onmouseout // onmouseover: model.onmouseover,
}); // onmouseout: model.onmouseout
// });
this.hide(); this.hide();
this.add(this.relocShelter); this.add(this.relocShelter);
this.add(this.section); // this.add(this.section);
} }
hide() { hide() {
this.relocShelter.hide(); this.relocShelter.hide();
this.section.hide(); // this.section.hide();
} }
show() { show() {
this.relocShelter.show(); this.relocShelter.show();
this.section.show(); // this.section.show();
} }
stopAnimation(flag) { stopAnimation(flag) {
this.section.stopAnimation(flag); // this.section.stopAnimation(flag);
} }
getSection() { getSection() {

181
src/jmapNew/shape/Switch/index.js
View File

@ -11,6 +11,7 @@ import ESwLnversion from './ESwLnversion';
import ELockRect from './ELockRect'; import ELockRect from './ELockRect';
import EMouse from './EMouse'; import EMouse from './EMouse';
import EHighlight from '../element/EHighlight'; import EHighlight from '../element/EHighlight';
import ERhomboid from './ERhomboid';
export default class Switch extends Group { export default class Switch extends Group {
constructor(model, style) { constructor(model, style) {
@ -51,7 +52,7 @@ export default class Switch extends Group {
const direct = -this.triangle.drictx * this.triangle.dricty; const direct = -this.triangle.drictx * this.triangle.dricty;
const coverLength = switchWidth * 1.5; const coverLength = switchWidth * 1.5;
this.swCore = new ESwCore({ this.swCore = new ESwCore({ // 道岔两个斜线 盖住所有
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: style, style: style,
@ -90,11 +91,13 @@ export default class Switch extends Group {
const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
const width3 = (style.Section.line.width / this.triangle.getSinRate()) - width2 - width1; const width3 = (style.Section.line.width / this.triangle.getSinRate()) - width2 - width1;
const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]]; // const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]];
const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; // const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
const spoint2 = [model.intersection.x - directx * 13, spoint1[1]];
const spoint3 = [model.intersection.x - directx * 13, model.intersection.y + directy * switchWidth1];
const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]]; const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]];
this.relocShelter = new ESwLnversion({ // 反位 this.relocShelter = new ESwLnversion({ // 反位覆盖形状
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: style, style: style,
@ -107,6 +110,19 @@ export default class Switch extends Group {
onmouseout: () => { this.name.getArrowText().hide(); } onmouseout: () => { this.name.getArrowText().hide(); }
}); });
this.rhomboid = new ERhomboid({ // 平行四边形覆盖范围
zlevel: this.zlevel,
z: this.z,
style: style,
sectionPoints: [spoint1, spoint2, spoint3, spoint4],
cursor: 'pointer',
halfWidth: halfWidth,
triangle: this.triangle,
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
this.releaseBackground = new Line({ // 区段上遮盖段 this.releaseBackground = new Line({ // 区段上遮盖段
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
@ -127,7 +143,7 @@ export default class Switch extends Group {
const nameTextX = model.namePosition.x + model.intersection.x + directx * (style.Section.line.width * 3 + style.Switch.text.offset.x) * this.triangle.getCotRate(); const nameTextX = model.namePosition.x + model.intersection.x + directx * (style.Section.line.width * 3 + style.Switch.text.offset.x) * this.triangle.getCotRate();
const nameTextY = model.namePosition.y + model.intersection.y + style.Switch.text.offset.y * (style.Switch.text.position || directy); const nameTextY = model.namePosition.y + model.intersection.y + style.Switch.text.offset.y * (style.Switch.text.position || directy);
this.name = new ESwName({ this.name = new ESwName({ // 道岔名称
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: style, style: style,
@ -144,6 +160,7 @@ export default class Switch extends Group {
this.add(this.swCore); // 岔芯link this.add(this.swCore); // 岔芯link
this.add(this.locShelter); this.add(this.locShelter);
this.add(this.relocShelter); this.add(this.relocShelter);
this.add(this.rhomboid);
this.add(this.releaseBackground); this.add(this.releaseBackground);
this.add(this.name); this.add(this.name);
} }
@ -195,7 +212,7 @@ export default class Switch extends Group {
/** 设置道岔文字颜色*/ /** 设置道岔文字颜色*/
setTextColor(color) { setTextColor(color) {
this.name.getNameText().setStyle({textFill: color}); this.name.getNameText().setStyle({ textFill: color });
} }
/** 设置道岔背景颜色*/ /** 设置道岔背景颜色*/
@ -205,17 +222,18 @@ export default class Switch extends Group {
/** 设置道岔文字边框颜色 (道岔封锁) */ /** 设置道岔文字边框颜色 (道岔封锁) */
setHasTextBorder(width) { setHasTextBorder(width) {
this.name.getTextRect().setStyle({lineWidth: width}); this.name.getTextRect().setStyle({ lineWidth: width });
} }
/** 恢复状态*/ /** 恢复状态*/
recover() { recover() {
this.lockRect.hide(); this.lockRect.hide(); // 矩形包围框
this.setSwitchCoreColor(this.style.backgroundColor); this.setSwitchCoreColor(this.style.backgroundColor);
this.name.getNameText().stopAnimation(false); this.name.getNameText().stopAnimation(false);
this.swCore.stopAnimation(false); this.swCore.stopAnimation(false);
this.relocShelter.stopAnimation(false); // this.relocShelter.hide();
this.relocShelter.hide(); // this.rhomboid.hide();
this.rhomboid.stopAnimation(false);
this.releaseBackground.hide(); this.releaseBackground.hide();
this.setHasTextBorder(0); this.setHasTextBorder(0);
} }
@ -224,8 +242,13 @@ export default class Switch extends Group {
setLocationAction() { setLocationAction() {
this.recover(); this.recover();
this.setSwitchCoreInvisible(true); this.setSwitchCoreInvisible(true);
this.locShelter.show(); if (this.style.Switch.core.splice) {
this.locShelter.hide();
} else {
this.locShelter.show();
}
this.relocShelter.hide(); this.relocShelter.hide();
this.rhomboid.hide();
this.setTextColor(this.style.Switch.text.locateColor); this.setTextColor(this.style.Switch.text.locateColor);
} }
@ -234,9 +257,15 @@ export default class Switch extends Group {
this.recover(); this.recover();
this.setSwitchCoreInvisible(true); this.setSwitchCoreInvisible(true);
this.setTextColor(this.style.Switch.text.inversionColor); this.setTextColor(this.style.Switch.text.inversionColor);
this.locShelter.hide(); if (this.style.Switch.core.splice) {
this.relocShelter.show(); this.relocShelter.hide();
} else {
this.relocShelter.show(); // 反位
}
this.locShelter.hide(); // 定位
this.rhomboid.show();
this.setSectionState(this.relocShelter.getSection(), 'fill', this.model); this.setSectionState(this.relocShelter.getSection(), 'fill', this.model);
this.setSectionState(this.rhomboid.getSection(), 'fill', this.model);
} }
/** 失去*/ /** 失去*/
@ -244,6 +273,7 @@ export default class Switch extends Group {
this.recover(); this.recover();
this.locShelter.hide(); this.locShelter.hide();
this.relocShelter.hide(); this.relocShelter.hide();
this.rhomboid.hide();
this.setSwitchCoreInvisible(false); this.setSwitchCoreInvisible(false);
this.setTextColor(this.style.Switch.text.lossColor); this.setTextColor(this.style.Switch.text.lossColor);
nameFlicker && this.nameTextAnimation(); nameFlicker && this.nameTextAnimation();
@ -271,12 +301,12 @@ export default class Switch extends Group {
this.lockRect.show(); this.lockRect.show();
} }
switch (this.model.locateType) { switch (this.model.locateType) {
case '01': // 定位 case '01': // 定位
this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色 this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色
break; break;
case '02': // 反位 case '02': // 反位
this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色 this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色
break; break;
} }
} }
@ -286,7 +316,7 @@ export default class Switch extends Group {
this.setHasTextBorder(1); this.setHasTextBorder(1);
} else if (this.style.Switch.block.contentRectShow) { } else if (this.style.Switch.block.contentRectShow) {
this.lockRect.show(); this.lockRect.show();
this.lockRect.setStyle({stroke: this.style.Switch.block.contentRectColor}); this.lockRect.setStyle({ stroke: this.style.Switch.block.contentRectColor });
} }
} }
@ -300,14 +330,17 @@ export default class Switch extends Group {
setSwitchCutOff() { setSwitchCutOff() {
this.setSwitchCoreInvisible(true); this.setSwitchCoreInvisible(true);
switch (this.model.locateType) { switch (this.model.locateType) {
case '01': case '01':
this.releaseBackground.hide(); this.releaseBackground.hide();
break; break;
case '02': case '02':
this.relocShelter.getSection().animateStyle(true) this.relocShelter.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor }) .when(1000, { fill: this.style.backgroundColor })
.start(); .start();
break; this.rhomboid.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
break;
} }
} }
@ -325,38 +358,38 @@ export default class Switch extends Group {
setSectionState(section, style, state) { setSectionState(section, style, state) {
if (section && !section.animators.length) { if (section && !section.animators.length) {
switch (state.sectionAstatus) { switch (state.sectionAstatus) {
case '00': break; case '00': break;
case '01': /** 空闲*/ case '01': /** 空闲*/
section.setStyle(style, this.style.Section.line.spareColor); section.setStyle(style, this.style.Section.line.spareColor);
break; break;
case '02': /** 通信车占用*/ case '02': /** 通信车占用*/
section.setStyle(style, this.style.Section.line.communicationOccupiedColor); section.setStyle(style, this.style.Section.line.communicationOccupiedColor);
break; break;
case '03': /** 非通信车占用*/ case '03': /** 非通信车占用*/
section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor); section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor);
break; break;
case '04': /** 进路锁闭*/ case '04': /** 进路锁闭*/
section.setStyle(style, this.style.Section.line.routeLockColor); section.setStyle(style, this.style.Section.line.routeLockColor);
break; break;
case '05': /** 故障锁闭*/ case '05': /** 故障锁闭*/
section.setStyle(style, this.style.Section.line.faultLockColor); section.setStyle(style, this.style.Section.line.faultLockColor);
break; break;
case '06': /** 封锁*/ case '06': /** 封锁*/
section.setStyle(style, this.style.Section.line.blockColor); section.setStyle(style, this.style.Section.line.blockColor);
break; break;
case '07': /** ATC切除*/ case '07': /** ATC切除*/
section.setStyle(style, this.style.Section.line.atcExcisionColor); section.setStyle(style, this.style.Section.line.atcExcisionColor);
break; break;
case '08': /** ATS切除*/ case '08': /** ATS切除*/
section.setStyle(style, this.style.Section.line.atsExcisionColor); section.setStyle(style, this.style.Section.line.atsExcisionColor);
section.animateStyle(true) section.animateStyle(true)
.when(1000, { fill: this.style.backgroundColor }) .when(1000, { fill: this.style.backgroundColor })
.when(2000, { fill: this.style.Section.line.atsExcisionColor }) .when(2000, { fill: this.style.Section.line.atsExcisionColor })
.start(); .start();
break; break;
case '09': /** 进路延续保护 */ case '09': /** 进路延续保护 */
section.setStyle(style, this.style.Section.line.protectiveLockColor); section.setStyle(style, this.style.Section.line.protectiveLockColor);
break; break;
} }
if (state.cutOff) { if (state.cutOff) {
@ -368,20 +401,20 @@ export default class Switch extends Group {
setLocateType(model) { setLocateType(model) {
switch (model.locateType) { switch (model.locateType) {
case '01': case '01':
this.setLocationAction(); /** 定位*/ this.setLocationAction(); /** 定位*/
break; break;
case '02': case '02':
this.setInversionAction(); /** 反位*/ this.setInversionAction(); /** 反位*/
break; break;
case '03': case '03':
this.setLossAction(true); /** 失去*/ this.setLossAction(true); /** 失去*/
break; break;
case '04': case '04':
this.setForkAction(); /** 挤岔*/ this.setForkAction(); /** 挤岔*/
break; break;
default: default:
this.setLocationAction(); this.setLocationAction();
} }
} }