joylink/rt-graphic-component
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

站台微调

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-01-12 13:45:39 +08:00
parent ba1ba27719
commit 8f979a4a9c
3 changed files with 119 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/packages/Platform/common/JlPlatform.d.ts vendored
View File

@ -49,7 +49,6 @@ export declare class DoorCodeLozenge extends Container {
} }
export declare abstract class JlPlatform extends JlGraphic { export declare abstract class JlPlatform extends JlGraphic {
static Type: string; static Type: string;
private platformConsts;
rectGraphic: RectGraphic; rectGraphic: RectGraphic;
constructor(platformConsts: PlatformConstsConfig); constructor(platformConsts: PlatformConstsConfig);
get datas(): IPlatformData; get datas(): IPlatformData;

110
components/packages/Platform/common/JlPlatform.js
View File

@ -15,15 +15,14 @@ class RectGraphic extends Container {
this.addChild(this.rect); this.addChild(this.rect);
} }
draw() { draw() {
const platformConsts = this.platformConsts; const fillColor = this.stateFillColor || this.platformConsts.noTrainStop;
const rect = this.rect; this.rect
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
rect
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(fillColor)) .lineStyle(this.platformConsts.lineWidth, new Color(fillColor))
.beginFill(fillColor, 1) .beginFill(fillColor, 1)
.drawRect(0, 0, platformConsts.width, platformConsts.height).endFill; .drawRect(0, 0, this.platformConsts.width, this.platformConsts.height)
rect.pivot = getRectangleCenter(new Rectangle(0, 0, platformConsts.width, platformConsts.height)); .endFill;
this.rect.pivot = getRectangleCenter(new Rectangle(0, 0, this.platformConsts.width, this.platformConsts.height));
} }
clear() { clear() {
this.rect.clear(); this.rect.clear();
@ -44,25 +43,22 @@ class DoorGraphic extends Container {
this.addChild(this.doorCloseGraphic); this.addChild(this.doorCloseGraphic);
} }
draw() { draw() {
const platformConsts = this.platformConsts; const doorConsts = this.platformConsts.doorGraphic;
const doorConsts = platformConsts.doorGraphic;
const doorGraphic = this.doorGraphic;
const doorCloseGraphic = this.doorCloseGraphic;
const lineColor = this.stateFillColor || doorConsts.doorGreen; const lineColor = this.stateFillColor || doorConsts.doorGreen;
doorGraphic this.doorGraphic
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(lineColor)) .lineStyle(this.platformConsts.lineWidth, new Color(lineColor))
.moveTo(-platformConsts.width / 2 - platformConsts.lineWidth / 2, 0) .moveTo(-this.platformConsts.width / 2 - this.platformConsts.lineWidth / 2, 0)
.lineTo(-doorConsts.doorOpenSpacing, 0) .lineTo(-doorConsts.doorOpenSpacing, 0)
.moveTo(doorConsts.doorOpenSpacing, 0) .moveTo(doorConsts.doorOpenSpacing, 0)
.lineTo(platformConsts.width / 2 + platformConsts.lineWidth / 2, 0); .lineTo(this.platformConsts.width / 2 + this.platformConsts.lineWidth / 2, 0);
//屏蔽门闭合 //屏蔽门闭合
doorCloseGraphic this.doorCloseGraphic
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(lineColor)) .lineStyle(this.platformConsts.lineWidth, new Color(lineColor))
.moveTo(-doorConsts.doorOpenSpacing, 0) .moveTo(-doorConsts.doorOpenSpacing, 0)
.lineTo(doorConsts.doorOpenSpacing, 0); .lineTo(doorConsts.doorOpenSpacing, 0);
this.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing); this.position.set(0, -this.platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
} }
changePosition() { changePosition() {
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.position)); this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.position));
@ -98,52 +94,46 @@ class CodeGraphic extends Container {
const platformConsts = this.platformConsts; const platformConsts = this.platformConsts;
const codeConsts = this.platformConsts.codeGraphic; const codeConsts = this.platformConsts.codeGraphic;
//扣车 //扣车
const character = this.character; this.character.text = 'H';
character.text = 'H'; this.character.anchor.set(0.5);
character.anchor.set(0.5); this.character.position.set(-platformConsts.width / 2 -
character.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 - platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4); (codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
character.style.fill = codeConsts.whiteNumbers; this.character.style.fill = codeConsts.whiteNumbers;
const circle = this.circle; this.circle
circle
.clear() .clear()
.lineStyle(0.5, codeConsts.whiteCircle) .lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius); .drawCircle(0, 0, codeConsts.circleRadius);
circle.position.set(-platformConsts.width / 2 - this.circle.position.set(-platformConsts.width / 2 -
platformConsts.lineWidth / 2 - platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5); (codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
//区间运行等级状态 //区间运行等级状态
const runLevel = this.runLevel; this.runLevel.anchor.set(0.5);
runLevel.anchor.set(0.5); this.runLevel.position.set(platformConsts.width / 2 +
runLevel.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing, -codeConsts.besideSpacing); 3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
runLevel.style.fill = codeConsts.whiteNumbers; this.runLevel.style.fill = codeConsts.whiteNumbers;
//区间运行时间 //区间运行时间
const runTime = this.runTime; this.runTime.anchor.set(0.5);
runTime.anchor.set(0.5); this.runTime.position.set(platformConsts.width / 2 +
runTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, -codeConsts.besideSpacing); codeConsts.besideSpacing, -codeConsts.besideSpacing);
runTime.style.fill = codeConsts.whiteNumbers; this.runTime.style.fill = codeConsts.whiteNumbers;
//停站时间 //停站时间
const stopTime = this.stopTime; this.stopTime.anchor.set(0.5);
stopTime.anchor.set(0.5); this.stopTime.position.set(platformConsts.width / 2 +
stopTime.position.set(platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing); codeConsts.besideSpacing, codeConsts.besideSpacing);
stopTime.style.fill = codeConsts.whiteNumbers; this.stopTime.style.fill = codeConsts.whiteNumbers;
character.visible = false; this.character.visible = false;
circle.visible = false; this.circle.visible = false;
runLevel.visible = false; this.runLevel.visible = false;
stopTime.visible = false; this.stopTime.visible = false;
runTime.visible = false; this.runTime.visible = false;
this.position.set(0, 0); this.position.set(0, 0);
} }
changePosition() { changePosition() {
const platformConsts = this.platformConsts; const codeConsts = this.platformConsts.codeGraphic;
const codeConsts = platformConsts.codeGraphic;
const psChange = [ const psChange = [
this.character, this.character,
this.runLevel, this.runLevel,
@ -155,9 +145,9 @@ class CodeGraphic extends Container {
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position)); g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
} }
}); });
this.circle.position.set(platformConsts.width / 2 + this.circle.position.set(this.platformConsts.width / 2 +
platformConsts.lineWidth / 2 + this.platformConsts.lineWidth / 2 +
(codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11); (codeConsts.besideSpacing * 4) / 3, (-this.platformConsts.height * 10) / 11);
} }
clear() { clear() {
this.character.destroy(); this.character.destroy();
@ -174,22 +164,20 @@ class LozengeGraphic extends Container {
this.addChild(this.lozenge); this.addChild(this.lozenge);
} }
draw() { draw() {
const platformConsts = this.platformConsts; const LozengeConsts = this.platformConsts
const LozengeConsts = platformConsts.lozengeGraphic; .lozengeGraphic;
const lozenge = this.lozenge; this.lozenge
lozenge
.clear() .clear()
.lineStyle(1, new Color(LozengeConsts.lozengeRed)) .lineStyle(1, new Color(LozengeConsts.lozengeRed))
.beginFill(LozengeConsts.lozengeRed, 1) .beginFill(LozengeConsts.lozengeRed, 1)
.drawRect(0, 0, platformConsts.height / 4, platformConsts.height / 4) .drawRect(0, 0, this.platformConsts.height / 4, this.platformConsts.height / 4)
.endFill(); .endFill();
const rect = new Rectangle(0, 0, platformConsts.height / 4, platformConsts.height / 4); this.lozenge.pivot = getRectangleCenter(new Rectangle(0, 0, this.platformConsts.height / 4, this.platformConsts.height / 4));
lozenge.pivot = getRectangleCenter(rect); this.lozenge.rotation = Math.PI / 4;
lozenge.rotation = Math.PI / 4; this.lozenge.visible = false;
lozenge.visible = false; this.position.set(0, -this.platformConsts.height / 2 -
this.position.set(0, -platformConsts.height / 2 -
LozengeConsts.doorPlatformSpacing - LozengeConsts.doorPlatformSpacing -
platformConsts.height / 3); this.platformConsts.height / 3);
} }
changePosition() { changePosition() {
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.position)); this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.position));
@ -229,12 +217,10 @@ class DoorCodeLozenge extends Container {
} }
class JlPlatform extends JlGraphic { class JlPlatform extends JlGraphic {
static Type = 'Platform'; static Type = 'Platform';
platformConsts;
rectGraphic; rectGraphic;
constructor(platformConsts) { constructor(platformConsts) {
super(JlPlatform.Type); super(JlPlatform.Type);
this.platformConsts = platformConsts; this.rectGraphic = new RectGraphic(platformConsts);
this.rectGraphic = new RectGraphic(this.platformConsts);
this.addChild(this.rectGraphic); this.addChild(this.rectGraphic);
} }
get datas() { get datas() {

134
src/packages/Platform/common/JlPlatform.ts
View File

@ -35,16 +35,20 @@ class RectGraphic extends Container {
this.addChild(this.rect); this.addChild(this.rect);
} }
draw(): void { draw(): void {
const platformConsts = this.platformConsts; const fillColor = this.stateFillColor || this.platformConsts.noTrainStop;
const rect = this.rect; this.rect
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
rect
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(fillColor)) .lineStyle(this.platformConsts.lineWidth, new Color(fillColor))
.beginFill(fillColor, 1) .beginFill(fillColor, 1)
.drawRect(0, 0, platformConsts.width, platformConsts.height).endFill; .drawRect(0, 0, this.platformConsts.width, this.platformConsts.height)
rect.pivot = getRectangleCenter( .endFill;
new Rectangle(0, 0, platformConsts.width, platformConsts.height), this.rect.pivot = getRectangleCenter(
new Rectangle(
0,
0,
this.platformConsts.width,
this.platformConsts.height,
),
); );
} }
clear(): void { clear(): void {
@ -66,27 +70,30 @@ export class DoorGraphic extends Container {
this.addChild(this.doorCloseGraphic); this.addChild(this.doorCloseGraphic);
} }
draw(): void { draw(): void {
const platformConsts = this.platformConsts; const doorConsts = this.platformConsts.doorGraphic as DoorConstsConfig;
const doorConsts = platformConsts.doorGraphic as DoorConstsConfig;
const doorGraphic = this.doorGraphic;
const doorCloseGraphic = this.doorCloseGraphic;
const lineColor = this.stateFillColor || doorConsts.doorGreen; const lineColor = this.stateFillColor || doorConsts.doorGreen;
doorGraphic this.doorGraphic
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(lineColor)) .lineStyle(this.platformConsts.lineWidth, new Color(lineColor))
.moveTo(-platformConsts.width / 2 - platformConsts.lineWidth / 2, 0) .moveTo(
-this.platformConsts.width / 2 - this.platformConsts.lineWidth / 2,
0,
)
.lineTo(-doorConsts.doorOpenSpacing, 0) .lineTo(-doorConsts.doorOpenSpacing, 0)
.moveTo(doorConsts.doorOpenSpacing, 0) .moveTo(doorConsts.doorOpenSpacing, 0)
.lineTo(platformConsts.width / 2 + platformConsts.lineWidth / 2, 0); .lineTo(
this.platformConsts.width / 2 + this.platformConsts.lineWidth / 2,
0,
);
//屏蔽门闭合 //屏蔽门闭合
doorCloseGraphic this.doorCloseGraphic
.clear() .clear()
.lineStyle(platformConsts.lineWidth, new Color(lineColor)) .lineStyle(this.platformConsts.lineWidth, new Color(lineColor))
.moveTo(-doorConsts.doorOpenSpacing, 0) .moveTo(-doorConsts.doorOpenSpacing, 0)
.lineTo(doorConsts.doorOpenSpacing, 0); .lineTo(doorConsts.doorOpenSpacing, 0);
this.position.set( this.position.set(
0, 0,
-platformConsts.height / 2 - doorConsts.doorPlatformSpacing, -this.platformConsts.height / 2 - doorConsts.doorPlatformSpacing,
); );
} }
changePosition() { changePosition() {
@ -125,67 +132,61 @@ export class CodeGraphic extends Container {
const platformConsts = this.platformConsts; const platformConsts = this.platformConsts;
const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig; const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
//扣车 //扣车
const character = this.character; this.character.text = 'H';
character.text = 'H'; this.character.anchor.set(0.5);
character.anchor.set(0.5); this.character.position.set(
character.position.set(
-platformConsts.width / 2 - -platformConsts.width / 2 -
platformConsts.lineWidth / 2 - platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 2) / 3, (codeConsts.besideSpacing * 2) / 3,
(platformConsts.height * 3) / 4, (platformConsts.height * 3) / 4,
); );
character.style.fill = codeConsts.whiteNumbers; this.character.style.fill = codeConsts.whiteNumbers;
const circle = this.circle; this.circle
circle
.clear() .clear()
.lineStyle(0.5, codeConsts.whiteCircle) .lineStyle(0.5, codeConsts.whiteCircle)
.drawCircle(0, 0, codeConsts.circleRadius); .drawCircle(0, 0, codeConsts.circleRadius);
circle.position.set( this.circle.position.set(
-platformConsts.width / 2 - -platformConsts.width / 2 -
platformConsts.lineWidth / 2 - platformConsts.lineWidth / 2 -
(codeConsts.besideSpacing * 4) / 3, (codeConsts.besideSpacing * 4) / 3,
(platformConsts.height * 3) / 5, (platformConsts.height * 3) / 5,
); );
//区间运行等级状态 //区间运行等级状态
const runLevel = this.runLevel; this.runLevel.anchor.set(0.5);
runLevel.anchor.set(0.5); this.runLevel.position.set(
runLevel.position.set(
platformConsts.width / 2 + platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
3 * codeConsts.besideSpacing, 3 * codeConsts.besideSpacing,
-codeConsts.besideSpacing, -codeConsts.besideSpacing,
); );
runLevel.style.fill = codeConsts.whiteNumbers; this.runLevel.style.fill = codeConsts.whiteNumbers;
//区间运行时间 //区间运行时间
const runTime = this.runTime; this.runTime.anchor.set(0.5);
runTime.anchor.set(0.5); this.runTime.position.set(
runTime.position.set(
platformConsts.width / 2 + platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing,
-codeConsts.besideSpacing, -codeConsts.besideSpacing,
); );
runTime.style.fill = codeConsts.whiteNumbers; this.runTime.style.fill = codeConsts.whiteNumbers;
//停站时间 //停站时间
const stopTime = this.stopTime; this.stopTime.anchor.set(0.5);
stopTime.anchor.set(0.5); this.stopTime.position.set(
stopTime.position.set(
platformConsts.width / 2 + platformConsts.width / 2 +
platformConsts.lineWidth / 2 + platformConsts.lineWidth / 2 +
codeConsts.besideSpacing, codeConsts.besideSpacing,
codeConsts.besideSpacing, codeConsts.besideSpacing,
); );
stopTime.style.fill = codeConsts.whiteNumbers; this.stopTime.style.fill = codeConsts.whiteNumbers;
character.visible = false; this.character.visible = false;
circle.visible = false; this.circle.visible = false;
runLevel.visible = false; this.runLevel.visible = false;
stopTime.visible = false; this.stopTime.visible = false;
runTime.visible = false; this.runTime.visible = false;
this.position.set(0, 0); this.position.set(0, 0);
} }
changePosition() { changePosition() {
const platformConsts = this.platformConsts; const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
const codeConsts = platformConsts.codeGraphic as CodeConstsConfig;
const psChange = [ const psChange = [
this.character, this.character,
this.runLevel, this.runLevel,
@ -198,10 +199,10 @@ export class CodeGraphic extends Container {
} }
}); });
this.circle.position.set( this.circle.position.set(
platformConsts.width / 2 + this.platformConsts.width / 2 +
platformConsts.lineWidth / 2 + this.platformConsts.lineWidth / 2 +
(codeConsts.besideSpacing * 4) / 3, (codeConsts.besideSpacing * 4) / 3,
(-platformConsts.height * 10) / 11, (-this.platformConsts.height * 10) / 11,
); );
} }
clear(): void { clear(): void {
@ -219,29 +220,34 @@ export class LozengeGraphic extends Container {
this.addChild(this.lozenge); this.addChild(this.lozenge);
} }
draw(): void { draw(): void {
const platformConsts = this.platformConsts; const LozengeConsts = this.platformConsts
const LozengeConsts = platformConsts.lozengeGraphic as LozengeConstsConfig; .lozengeGraphic as LozengeConstsConfig;
const lozenge = this.lozenge; this.lozenge
lozenge
.clear() .clear()
.lineStyle(1, new Color(LozengeConsts.lozengeRed)) .lineStyle(1, new Color(LozengeConsts.lozengeRed))
.beginFill(LozengeConsts.lozengeRed, 1) .beginFill(LozengeConsts.lozengeRed, 1)
.drawRect(0, 0, platformConsts.height / 4, platformConsts.height / 4) .drawRect(
0,
0,
this.platformConsts.height / 4,
this.platformConsts.height / 4,
)
.endFill(); .endFill();
const rect = new Rectangle( this.lozenge.pivot = getRectangleCenter(
new Rectangle(
0, 0,
0, 0,
platformConsts.height / 4, this.platformConsts.height / 4,
platformConsts.height / 4, this.platformConsts.height / 4,
),
); );
lozenge.pivot = getRectangleCenter(rect); this.lozenge.rotation = Math.PI / 4;
lozenge.rotation = Math.PI / 4; this.lozenge.visible = false;
lozenge.visible = false;
this.position.set( this.position.set(
0, 0,
-platformConsts.height / 2 - -this.platformConsts.height / 2 -
LozengeConsts.doorPlatformSpacing - LozengeConsts.doorPlatformSpacing -
platformConsts.height / 3, this.platformConsts.height / 3,
); );
} }
changePosition() { changePosition() {
@ -286,12 +292,10 @@ export class DoorCodeLozenge extends Container {
export abstract class JlPlatform extends JlGraphic { export abstract class JlPlatform extends JlGraphic {
static Type = 'Platform'; static Type = 'Platform';
private platformConsts: PlatformConstsConfig;
rectGraphic: RectGraphic; rectGraphic: RectGraphic;
constructor(platformConsts: PlatformConstsConfig) { constructor(platformConsts: PlatformConstsConfig) {
super(JlPlatform.Type); super(JlPlatform.Type);
this.platformConsts = platformConsts; this.rectGraphic = new RectGraphic(platformConsts);
this.rectGraphic = new RectGraphic(this.platformConsts);
this.addChild(this.rectGraphic); this.addChild(this.rectGraphic);
} }
get datas() { get datas() {