314 lines
10 KiB
JavaScript
314 lines
10 KiB
JavaScript
import { Container, Graphics, Point, Color } from 'pixi.js';
|
|
import { JlGraphic, calculateMirrorPoint, VectorText } from 'jl-graphic';
|
|
import { getTrainConsts, EnumDiriveModel, EnumTrainType } from './TrainConfig.js';
|
|
|
|
class TrainHead extends Container {
|
|
arrow; // 列车箭头
|
|
pause; // 列车停止
|
|
train;
|
|
isStop;
|
|
arrowColor;
|
|
pauseColor;
|
|
constructor(train) {
|
|
super();
|
|
this.arrow = new Graphics();
|
|
this.pause = new Graphics();
|
|
this.addChild(this.arrow);
|
|
this.addChild(this.pause);
|
|
this.train = train;
|
|
this.isStop = true;
|
|
this.arrowColor = this.train.constDatas.arrowDefaultColor;
|
|
this.pauseColor = this.train.constDatas.pauseDefaultColor;
|
|
}
|
|
clear() {
|
|
this.arrow.clear();
|
|
this.pause.clear();
|
|
}
|
|
doRepaint() {
|
|
this.clear();
|
|
const trainConsts = this.train.constDatas;
|
|
const bodyWH = this.train.trainbody.getBodyWH();
|
|
const marginX = trainConsts.marginX;
|
|
const pauseW = trainConsts.pauseW;
|
|
const bodyWidth = bodyWH ? bodyWH.width : trainConsts.bodyWidth;
|
|
const bodyHeight = bodyWH ? bodyWH.height : trainConsts.bodyHeight;
|
|
let pauseTW = pauseW + marginX;
|
|
if (trainConsts.arrowPauseOnlyOne) {
|
|
pauseTW = 0;
|
|
}
|
|
let arrowPoint = [
|
|
-bodyHeight * 0.4 - marginX - pauseTW - bodyWidth / 2,
|
|
0,
|
|
-marginX - pauseTW - bodyWidth / 2,
|
|
bodyHeight / 2,
|
|
-marginX - pauseTW - bodyWidth / 2,
|
|
-bodyHeight / 2,
|
|
];
|
|
let pausePoint = [
|
|
-marginX - pauseW / 2 - bodyWidth / 2,
|
|
-bodyHeight / 2,
|
|
-marginX - pauseW / 2 - bodyWidth / 2,
|
|
bodyHeight / 2,
|
|
];
|
|
// 列车是向右或者向上
|
|
if (this.isRight()) {
|
|
const aP = [];
|
|
arrowPoint.forEach((item, index) => {
|
|
if (index % 2 == 1) {
|
|
const p = new Point(arrowPoint[index - 1], item);
|
|
const newP = calculateMirrorPoint(new Point(0, 0), p);
|
|
aP.push(newP.x, newP.y);
|
|
}
|
|
});
|
|
arrowPoint = aP;
|
|
const pP = [];
|
|
pausePoint.forEach((item, index) => {
|
|
if (index % 2 == 1) {
|
|
const p = new Point(pausePoint[index - 1], item);
|
|
const newP = calculateMirrorPoint(new Point(0, 0), p);
|
|
pP.push(newP.x, newP.y);
|
|
}
|
|
});
|
|
pausePoint = pP;
|
|
}
|
|
this.pause.lineStyle(pauseW, this.pauseColor, 1);
|
|
this.pause.moveTo(pausePoint[0], pausePoint[1]);
|
|
this.pause.lineTo(pausePoint[2], pausePoint[3]);
|
|
const arrow = this.arrow;
|
|
arrow.beginFill(this.arrowColor, 1);
|
|
arrow.drawPolygon(arrowPoint);
|
|
arrow.endFill();
|
|
}
|
|
isRight() {
|
|
let d = false;
|
|
if (this.train.isRightRoTop) {
|
|
d = true;
|
|
}
|
|
return d;
|
|
}
|
|
}
|
|
class TrainBody extends Container {
|
|
bodyRact;
|
|
codeAGraph = new VectorText(''); //识别号AA
|
|
codeBGraph = new VectorText(''); //识别号BBB
|
|
train;
|
|
codeAColor;
|
|
codeBColor;
|
|
codeAText;
|
|
codeBText;
|
|
constructor(train) {
|
|
super();
|
|
this.bodyRact = new Graphics();
|
|
this.addChild(this.bodyRact);
|
|
this.addChild(this.codeAGraph);
|
|
this.addChild(this.codeBGraph);
|
|
this.train = train;
|
|
this.codeAGraph.setVectorFontSize(this.train.constDatas.codeFontSize);
|
|
this.codeBGraph.setVectorFontSize(this.train.constDatas.codeFontSize);
|
|
this.codeAColor = this.train.constDatas.codeColor;
|
|
this.codeBColor = this.train.constDatas.codeColor;
|
|
this.codeAText = '';
|
|
this.codeBText = '';
|
|
}
|
|
clear() {
|
|
this.bodyRact.clear();
|
|
}
|
|
getBodyWH() {
|
|
const bodyAWH = this.codeAGraph.getLocalBounds();
|
|
const bodyBWH = this.codeBGraph.getLocalBounds();
|
|
return {
|
|
width: bodyAWH.width + bodyBWH.width + this.train.constDatas.bodyPadding * 2,
|
|
height: bodyAWH.height + this.train.constDatas.bodyPadding * 2,
|
|
};
|
|
}
|
|
doRepaint() {
|
|
this.clear();
|
|
const trainConsts = this.train.constDatas;
|
|
const codeAGraph = this.codeAGraph;
|
|
const codeBGraph = this.codeBGraph;
|
|
codeAGraph.text = this.codeAText;
|
|
codeBGraph.text = this.codeBText;
|
|
codeAGraph.anchor.set(0.5);
|
|
codeBGraph.anchor.set(0.5);
|
|
const styleA = {
|
|
fill: this.codeAColor,
|
|
fontSize: trainConsts.codeFontSize,
|
|
};
|
|
const styleB = {
|
|
fill: this.codeBColor,
|
|
fontSize: trainConsts.codeFontSize,
|
|
};
|
|
codeAGraph.style = styleA;
|
|
codeBGraph.style = styleB;
|
|
if (this.codeBText) {
|
|
const bodyAWH = codeAGraph.getLocalBounds();
|
|
const bodyBWH = codeBGraph.getLocalBounds();
|
|
codeAGraph.position.set(-bodyBWH.width / 2, 0);
|
|
codeBGraph.position.set(bodyAWH.width / 2, 0);
|
|
}
|
|
if (this.train.constDatas.hasBodyRact) {
|
|
const bodyRact = this.bodyRact;
|
|
const { width: bodyWidth, height: bodyHeight } = this.getBodyWH();
|
|
bodyRact.lineStyle(trainConsts.borderWidth, new Color(trainConsts.borderColor));
|
|
const bgColor = trainConsts.bodyBgColor;
|
|
bodyRact.beginFill(new Color(bgColor));
|
|
bodyRact.drawRect(-bodyWidth / 2, -bodyHeight / 2, bodyWidth, bodyHeight);
|
|
bodyRact.endFill();
|
|
}
|
|
}
|
|
}
|
|
class StatusText extends Container {
|
|
sText = new VectorText('');
|
|
train;
|
|
constructor(train) {
|
|
super();
|
|
this.train = train;
|
|
this.addChild(this.sText);
|
|
}
|
|
doRepaint(text, bodyWH) {
|
|
const trainConsts = this.train.constDatas;
|
|
let t = text;
|
|
if (trainConsts.statusTextTransform) {
|
|
t = trainConsts.statusTextTransform[text];
|
|
}
|
|
this.sText.text = t;
|
|
this.sText.anchor.set(0.5);
|
|
const c = trainConsts.statusTextColor[text] || trainConsts.statusTextColor.D;
|
|
const style = {
|
|
fill: c,
|
|
fontSize: trainConsts.textFontSize,
|
|
};
|
|
this.sText.style = style;
|
|
const { width: bodyWidth, height: bodyHeight } = bodyWH;
|
|
const { width: textHWidth, height: textHeight } = this.sText.getLocalBounds();
|
|
const num = trainConsts.statusTextList.length;
|
|
let index = trainConsts.statusTextList.findIndex((item) => {
|
|
return item == text;
|
|
});
|
|
if (index < 0) {
|
|
index = (num - 1) / 2; // 中间
|
|
}
|
|
const textMargin = (bodyWidth - textHWidth * num) / (num - 1);
|
|
this.sText.position.set(-bodyWidth / 2 + (textHWidth * (index * 2 + 1)) / 2 + textMargin * index, -bodyHeight / 2 - textHeight / 2 - trainConsts.textMarginY);
|
|
}
|
|
clear() {
|
|
this.sText.text = '';
|
|
}
|
|
}
|
|
/**
|
|
* 列车
|
|
*/
|
|
class Train extends JlGraphic {
|
|
static Type = 'Train';
|
|
trainHead;
|
|
trainbody;
|
|
statusTextMap = new Map();
|
|
isRightRoTop; // 方向是否向右或者向上
|
|
constDatas;
|
|
constructor(data) {
|
|
super(Train.Type);
|
|
this.isRightRoTop = false;
|
|
this.constDatas = getTrainConsts();
|
|
if (data) {
|
|
Object.assign(this.constDatas, data);
|
|
}
|
|
this.trainbody = new TrainBody(this);
|
|
this.trainHead = new TrainHead(this);
|
|
this.addChild(this.trainHead);
|
|
this.addChild(this.trainbody);
|
|
}
|
|
get datas() {
|
|
return this.getDatas();
|
|
}
|
|
doRepaint() {
|
|
this.trainbody.doRepaint();
|
|
this.trainHead.doRepaint();
|
|
}
|
|
// 设置列车是否显示停止
|
|
setIsStop(v) {
|
|
this.trainHead.isStop = v;
|
|
}
|
|
// 设置列车箭头是否显示
|
|
setArrowVisible(v) {
|
|
this.trainHead.arrow.visible = v;
|
|
}
|
|
// 设置列车暂停是否显示
|
|
setPauseVisible(v) {
|
|
this.trainHead.pause.visible = v;
|
|
}
|
|
run() {
|
|
this.trainHead.arrow.visible = true;
|
|
this.trainHead.pause.visible = !this.constDatas.arrowPauseOnlyOne;
|
|
}
|
|
stop() {
|
|
this.trainHead.arrow.visible = false;
|
|
this.trainHead.pause.visible = true;
|
|
}
|
|
setCodeAText(v) {
|
|
this.trainbody.codeAText = v;
|
|
}
|
|
setCodeBText(v) {
|
|
this.trainbody.codeBText = v;
|
|
}
|
|
// 设置驾驶模式对应颜色
|
|
setDiriveModelColor(s) {
|
|
const DiriveModelColorEnum = this.constDatas.DiriveModelColorEnum;
|
|
let aColor = DiriveModelColorEnum.AM;
|
|
let pColor = DiriveModelColorEnum.SM;
|
|
if (s == EnumDiriveModel.SM) {
|
|
aColor = DiriveModelColorEnum.SM;
|
|
pColor = DiriveModelColorEnum.SM;
|
|
}
|
|
else if (s == EnumDiriveModel.RM) {
|
|
aColor = DiriveModelColorEnum.RM;
|
|
pColor = DiriveModelColorEnum.RM;
|
|
}
|
|
this.trainHead.arrowColor = aColor;
|
|
this.trainHead.pauseColor = pColor;
|
|
}
|
|
// 设置列车类型对应颜色
|
|
setTrainTypeColor(s) {
|
|
const typeColorEnum = this.constDatas.typeColorEnum;
|
|
const fillAColor = typeColorEnum.schedule;
|
|
let fillBColor = typeColorEnum.schedule;
|
|
if (s == EnumTrainType.late) {
|
|
fillBColor = typeColorEnum.late;
|
|
}
|
|
else if (s == EnumTrainType.early) {
|
|
fillBColor = typeColorEnum.early;
|
|
}
|
|
else if (s == EnumTrainType.head) {
|
|
fillBColor = typeColorEnum.head;
|
|
}
|
|
else if (s == EnumTrainType.manual) {
|
|
fillBColor = typeColorEnum.manual;
|
|
}
|
|
this.trainbody.codeAColor = fillAColor;
|
|
this.trainbody.codeBColor = fillBColor;
|
|
}
|
|
// 显示列车状态文字
|
|
showStatus(s) {
|
|
if (this.statusTextMap.has(s)) {
|
|
return;
|
|
}
|
|
const bodyWH = this.trainbody.getBodyWH();
|
|
const textD = new StatusText(this);
|
|
textD.doRepaint(s, bodyWH);
|
|
this.addChild(textD);
|
|
this.statusTextMap.set(s, textD);
|
|
}
|
|
// 隐藏列车状态文字
|
|
hideStatus(s) {
|
|
if (!this.statusTextMap.has(s)) {
|
|
return;
|
|
}
|
|
const textD = this.statusTextMap.get(s);
|
|
if (textD) {
|
|
textD.clear();
|
|
this.statusTextMap.delete(s);
|
|
}
|
|
}
|
|
}
|
|
|
|
export { Train };
|