rt-graphic-component/components/packages/Platform/JlPlatform.js

231 lines
8.5 KiB
JavaScript
Raw Normal View History

2024-01-10 15:46:15 +08:00
import { calculateMirrorPoint, JlGraphic, getRectangleCenter, VectorText } from 'jl-graphic';
import { Container, Point, Graphics, Color, Rectangle } from 'pixi.js';
2023-12-25 13:25:01 +08:00
2023-12-26 10:25:57 +08:00
//子元素--矩形
2023-12-25 13:25:01 +08:00
class RectGraphic extends Container {
2024-01-02 14:36:10 +08:00
rect;
stateFillColor;
2024-01-10 15:46:15 +08:00
constructor() {
2023-12-25 13:25:01 +08:00
super();
2024-01-02 14:36:10 +08:00
this.rect = new Graphics();
this.addChild(this.rect);
2023-12-25 13:25:01 +08:00
}
2024-01-02 14:36:10 +08:00
draw(platformConsts) {
const rect = this.rect;
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
rect
2023-12-25 13:25:01 +08:00
.clear()
.lineStyle(platformConsts.lineWidth, new Color(fillColor))
.beginFill(fillColor, 1)
.drawRect(0, 0, platformConsts.width, platformConsts.height).endFill;
2024-01-02 14:36:10 +08:00
rect.pivot = getRectangleCenter(new Rectangle(0, 0, platformConsts.width, platformConsts.height));
2023-12-25 13:25:01 +08:00
}
clear() {
2024-01-02 14:36:10 +08:00
this.rect.clear();
2023-12-25 13:25:01 +08:00
}
}
2023-12-25 17:20:03 +08:00
//子元素--门
2023-12-25 13:25:01 +08:00
class DoorGraphic extends Container {
doorGraphic;
doorCloseGraphic;
2024-01-02 14:36:10 +08:00
stateFillColor;
2024-01-10 15:46:15 +08:00
constructor() {
2023-12-25 13:25:01 +08:00
super();
this.doorGraphic = new Graphics();
this.doorCloseGraphic = new Graphics();
this.addChild(this.doorGraphic);
this.addChild(this.doorCloseGraphic);
}
2024-01-02 14:36:10 +08:00
draw(platformConsts) {
2023-12-25 17:20:03 +08:00
const doorConsts = platformConsts.doorGraphic;
2023-12-25 13:25:01 +08:00
const doorGraphic = this.doorGraphic;
const doorCloseGraphic = this.doorCloseGraphic;
2024-01-02 14:36:10 +08:00
const lineColor = this.stateFillColor || doorConsts.doorGreen;
doorGraphic
.clear()
2023-12-25 17:46:12 +08:00
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
.moveTo(-platformConsts.width / 2 - platformConsts.lineWidth / 2, 0)
.lineTo(-doorConsts.doorOpenSpacing, 0)
.moveTo(doorConsts.doorOpenSpacing, 0)
.lineTo(platformConsts.width / 2 + platformConsts.lineWidth / 2, 0);
2023-12-25 13:25:01 +08:00
//屏蔽门闭合
2024-01-02 14:36:10 +08:00
doorCloseGraphic
.clear()
2023-12-25 17:46:12 +08:00
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
.moveTo(-doorConsts.doorOpenSpacing, 0)
.lineTo(doorConsts.doorOpenSpacing, 0);
2023-12-25 13:25:01 +08:00
}
clear() {
this.doorGraphic.clear();
this.doorCloseGraphic.clear();
}
2023-12-25 17:20:03 +08:00
}
//子元素--字符
2024-01-02 14:36:10 +08:00
class CodeGraphic extends Container {
2023-12-25 17:20:03 +08:00
character = new VectorText(''); //扣车H
runLevel = new VectorText(''); //运行等级
runTime = new VectorText(''); //运行时间
stopTime = new VectorText(''); //停站时间
circle = new Graphics();
2024-01-10 15:46:15 +08:00
constructor(platformConsts) {
2023-12-25 17:20:03 +08:00
super();
this.addChild(this.character);
this.addChild(this.runLevel);
this.addChild(this.circle);
this.addChild(this.stopTime);
this.addChild(this.runTime);
const codeConsts = platformConsts.codeGraphic;
this.character.setVectorFontSize(codeConsts.besideFontSize);
this.runLevel.setVectorFontSize(codeConsts.besideFontSize);
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
}
draw(platformConsts) {
const codeConsts = platformConsts.codeGraphic;
//扣车
const character = this.character;
character.text = 'H';
character.anchor.set(0.5);
character.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
character.style.fill = codeConsts.whiteNumbers;
const circle = this.circle;
2024-01-02 14:36:10 +08:00
circle
.clear()
2023-12-25 17:46:12 +08:00
.lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius);
2023-12-25 17:20:03 +08:00
circle.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
//区间运行等级状态
const runLevel = this.runLevel;
runLevel.anchor.set(0.5);
runLevel.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
runLevel.style.fill = codeConsts.whiteNumbers;
//区间运行时间
const runTime = this.runTime;
runTime.anchor.set(0.5);
runTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, -codeConsts.besideSpacing);
runTime.style.fill = codeConsts.whiteNumbers;
//停站时间
const stopTime = this.stopTime;
stopTime.anchor.set(0.5);
stopTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing);
stopTime.style.fill = codeConsts.whiteNumbers;
character.visible = false;
circle.visible = false;
runLevel.visible = false;
stopTime.visible = false;
runTime.visible = false;
}
clear() {
this.character.destroy();
}
}
//子元素--站台旁菱形图标
class LozengeGraphic extends Container {
2024-01-02 14:36:10 +08:00
lozenge;
2024-01-10 15:46:15 +08:00
constructor() {
2023-12-25 17:20:03 +08:00
super();
2024-01-02 14:36:10 +08:00
this.lozenge = new Graphics();
this.addChild(this.lozenge);
2023-12-25 17:20:03 +08:00
}
draw(platformConsts) {
const LozengeConsts = platformConsts.lozengeGraphic;
2024-01-02 14:36:10 +08:00
const lozenge = this.lozenge;
lozenge
.clear()
2023-12-25 17:46:12 +08:00
.lineStyle(1, new Color(LozengeConsts.lozengeRed))
.beginFill(LozengeConsts.lozengeRed, 1)
.drawRect(0, 0, platformConsts.height / 4, platformConsts.height / 4)
.endFill();
2023-12-25 17:20:03 +08:00
const rect = new Rectangle(0, 0, platformConsts.height / 4, platformConsts.height / 4);
2024-01-02 14:36:10 +08:00
lozenge.pivot = getRectangleCenter(rect);
lozenge.rotation = Math.PI / 4;
lozenge.visible = false;
2023-12-25 17:20:03 +08:00
}
clear() {
2024-01-02 14:36:10 +08:00
this.lozenge.clear();
2023-12-25 17:20:03 +08:00
}
2023-12-25 13:25:01 +08:00
}
2024-01-10 15:46:15 +08:00
class DoorCodeLozenge extends Container {
2024-01-02 14:36:10 +08:00
platformConsts;
2023-12-25 17:20:03 +08:00
doorGraphic;
lozengeGraphic;
2024-01-02 14:36:10 +08:00
codeGraphic;
2024-01-10 16:59:12 +08:00
constructor(platformConsts) {
2024-01-10 15:46:15 +08:00
super();
2024-01-10 16:59:12 +08:00
this.platformConsts = platformConsts;
2024-01-10 15:46:15 +08:00
this.doorGraphic = new DoorGraphic();
this.addChild(this.doorGraphic);
this.lozengeGraphic = new LozengeGraphic();
this.addChild(this.lozengeGraphic);
this.codeGraphic = new CodeGraphic(this.platformConsts);
this.addChild(this.codeGraphic);
}
draw(hasDoor, direction) {
const platformConsts = this.platformConsts;
this.doorGraphic.clear();
if (hasDoor) {
const doorConsts = platformConsts.doorGraphic;
this.doorGraphic.draw(platformConsts);
this.doorGraphic.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
2023-12-25 17:46:12 +08:00
}
2024-01-10 15:46:15 +08:00
const codeConsts = platformConsts.codeGraphic;
this.codeGraphic.draw(platformConsts);
this.codeGraphic.position.set(0, 0);
const LozengeConsts = platformConsts.lozengeGraphic;
this.lozengeGraphic.draw(platformConsts);
this.lozengeGraphic.position.set(0, -platformConsts.height / 2 -
LozengeConsts.doorPlatformSpacing -
platformConsts.height / 3);
if (direction == 'down') {
this.doorGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position));
this.lozengeGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position));
const psChange = [
this.codeGraphic.character,
this.codeGraphic.runLevel,
this.codeGraphic.stopTime,
this.codeGraphic.runTime,
];
psChange.forEach((g) => {
if (g) {
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
}
});
this.codeGraphic.circle.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 +
(codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11);
2023-12-25 17:20:03 +08:00
}
2023-12-25 13:25:01 +08:00
}
2024-01-10 15:46:15 +08:00
}
class JlPlatform extends JlGraphic {
static Type = 'Platform';
platformConsts;
rectGraphic;
constructor(platformConsts) {
super(JlPlatform.Type);
this.platformConsts = platformConsts;
this.rectGraphic = new RectGraphic();
this.addChild(this.rectGraphic);
}
2023-12-25 13:25:01 +08:00
get datas() {
return this.getDatas();
}
2024-01-05 16:46:49 +08:00
get code() {
return this.datas.code;
}
2024-01-10 15:46:15 +08:00
draw() {
this.rectGraphic.draw(this.platformConsts);
2023-12-25 13:25:01 +08:00
}
}
2024-01-10 15:46:15 +08:00
export { DoorCodeLozenge, JlPlatform };