信号机调整
This commit is contained in:
fan
parent
7c33be246f
commit
282a1d2b34
@ -1,215 +1,104 @@
|
||||
import { IPointData, Graphics, Color } from 'pixi.js';
|
||||
import { Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'src/jl-graphic';
|
||||
import { LampBody } from './lampBody';
|
||||
import { SignalDraw } from './SignalDrawAssistant';
|
||||
|
||||
export interface ISignalData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get codeColor(): string;
|
||||
set codeColor(v: string);
|
||||
get codeFontSize(): number;
|
||||
set codeFontSize(v: number);
|
||||
get point(): IPointData;
|
||||
set point(point: IPointData);
|
||||
get direction(): string;
|
||||
set direction(v: string);
|
||||
clone(): ISignalData;
|
||||
copyFrom(data: ISignalData): void;
|
||||
eq(other: ISignalData): boolean;
|
||||
}
|
||||
|
||||
//站台颜色
|
||||
export enum SignalColorEnum {
|
||||
lampPostColor = '0xc0c0c0',
|
||||
lampColor = '0xff0000',
|
||||
humanControlColor = '0xffff00',
|
||||
fleetModeColor = '0x00ff00',
|
||||
logicModeColor = '0x000000',
|
||||
codeColor = '0X000000',
|
||||
}
|
||||
|
||||
const signalConsts = {
|
||||
verticalLampPostLength: 20,
|
||||
levelLampPostLength: 5,
|
||||
lineWidth: 3,
|
||||
lampRadius: 10,
|
||||
lampNum: 1,
|
||||
codeFontSize: 11,
|
||||
nameOffsetY: 20,
|
||||
humanControlPath: [-2, 0, -17, 10, -17, -10],
|
||||
logicModeLineWidth: 2,
|
||||
logicModeDistance: 7,
|
||||
fleetModePath: [2, -4, 22, -4, 22, -10, 35, 0, 22, 10, 22, 4, 2, 4],
|
||||
};
|
||||
export class Signal extends JlGraphic {
|
||||
static Type = 'signal';
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
lampPost: Graphics = new Graphics();
|
||||
circularLamp: Graphics = new Graphics();
|
||||
humanControl: Graphics = new Graphics();
|
||||
fleetMode: Graphics = new Graphics();
|
||||
logicMode: Graphics = new Graphics();
|
||||
lampBody: LampBody = new LampBody();
|
||||
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.lampPost);
|
||||
this.addChild(this.circularLamp);
|
||||
this.addChild(this.humanControl);
|
||||
this.addChild(this.fleetMode);
|
||||
this.addChild(this.logicMode);
|
||||
this.addChild(this.lampBody);
|
||||
}
|
||||
|
||||
get datas(): ISignalData {
|
||||
return this.getDatas<ISignalData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
this.lampPost.clear();
|
||||
this.lampPost.lineStyle(
|
||||
signalConsts.lineWidth,
|
||||
new Color(SignalColorEnum.lampPostColor)
|
||||
);
|
||||
this.lampPost.moveTo(0, -signalConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.lineTo(0, signalConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.moveTo(0, 0);
|
||||
this.lampPost.lineTo(signalConsts.levelLampPostLength, 0);
|
||||
this.circularLamp.beginFill(SignalColorEnum.lampColor, 1);
|
||||
this.circularLamp.drawCircle(
|
||||
signalConsts.levelLampPostLength + signalConsts.lampRadius,
|
||||
0,
|
||||
signalConsts.lampRadius
|
||||
);
|
||||
this.circularLamp.endFill();
|
||||
this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
this.humanControl.drawPolygon(signalConsts.humanControlPath);
|
||||
this.humanControl.endFill();
|
||||
this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
|
||||
static computedFleetModePath(x: number): number[] {
|
||||
const fleetModePath: number[] = [];
|
||||
signalConsts.fleetModePath.forEach((item: number, index: number) => {
|
||||
if (!(index % 2)) {
|
||||
fleetModePath.push(
|
||||
item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
|
||||
);
|
||||
fleetModePath.push(item + x);
|
||||
} else {
|
||||
fleetModePath.push(item);
|
||||
}
|
||||
});
|
||||
this.fleetMode.drawPolygon(fleetModePath);
|
||||
this.fleetMode.endFill();
|
||||
this.logicMode.lineStyle(2, new Color(SignalColorEnum.logicModeColor));
|
||||
this.logicMode.moveTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius -
|
||||
signalConsts.logicModeDistance,
|
||||
signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius +
|
||||
signalConsts.logicModeDistance,
|
||||
-signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius -
|
||||
signalConsts.logicModeDistance,
|
||||
-signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius +
|
||||
signalConsts.logicModeDistance,
|
||||
signalConsts.logicModeDistance
|
||||
);
|
||||
if (this.datas.code == '') {
|
||||
codeGraph.text = '信号机Signal';
|
||||
} else {
|
||||
codeGraph.text = this.datas.code;
|
||||
}
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.setVectorFontSize(this.datas.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.position.set(0, signalConsts.nameOffsetY);
|
||||
if (this.datas.direction === 'left') {
|
||||
this.lampPost.rotation = Math.PI;
|
||||
this.circularLamp.rotation = Math.PI;
|
||||
this.humanControl.rotation = Math.PI;
|
||||
this.fleetMode.rotation = Math.PI;
|
||||
this.logicMode.rotation = Math.PI;
|
||||
} else if (this.datas.direction === 'up') {
|
||||
this.lampPost.rotation = (Math.PI / 2) * 3;
|
||||
this.circularLamp.rotation = (Math.PI / 2) * 3;
|
||||
this.humanControl.rotation = (Math.PI / 2) * 3;
|
||||
this.fleetMode.rotation = (Math.PI / 2) * 3;
|
||||
this.logicMode.rotation = (Math.PI / 2) * 3;
|
||||
} else if (this.datas.direction === 'down') {
|
||||
this.lampPost.rotation = Math.PI / 2;
|
||||
this.circularLamp.rotation = Math.PI / 2;
|
||||
this.humanControl.rotation = Math.PI / 2;
|
||||
this.fleetMode.rotation = Math.PI / 2;
|
||||
this.logicMode.rotation = Math.PI / 2;
|
||||
} else {
|
||||
this.lampPost.rotation = 0;
|
||||
this.circularLamp.rotation = 0;
|
||||
this.humanControl.rotation = 0;
|
||||
this.fleetMode.rotation = 0;
|
||||
this.logicMode.rotation = 0;
|
||||
return fleetModePath;
|
||||
}
|
||||
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
static paint(signal: Signal | SignalDraw, data?: ISignalData): void {
|
||||
signal.lampBody.paint(signalConsts.lampNum);
|
||||
signal.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
signal.humanControl.drawPolygon(signalConsts.humanControlPath);
|
||||
signal.humanControl.endFill();
|
||||
signal.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
const fleetModePath = Signal.computedFleetModePath(signal.lampBody.width);
|
||||
signal.fleetMode.drawPolygon(fleetModePath);
|
||||
signal.fleetMode.endFill();
|
||||
signal.codeGraph.text = data?.code || '信号机编号';
|
||||
signal.codeGraph.style.fill = SignalColorEnum.codeColor;
|
||||
signal.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
|
||||
signal.codeGraph.anchor.set(0.5);
|
||||
signal.codeGraph.style.fill = SignalColorEnum.codeColor;
|
||||
signal.codeGraph.position.set(0, signalConsts.nameOffsetY);
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
// this.lampBody.paint(signalConsts.lampNum);
|
||||
// this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
// this.humanControl.drawPolygon(signalConsts.humanControlPath);
|
||||
// this.humanControl.endFill();
|
||||
// this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
// const fleetModePath = Signal.computedFleetModePath(this.lampBody.width);
|
||||
// this.fleetMode.drawPolygon(fleetModePath);
|
||||
// this.fleetMode.endFill();
|
||||
// this.codeGraph.text = this.datas.code || '信号机Signal';
|
||||
// this.codeGraph.style.fill = SignalColorEnum.codeColor;
|
||||
// this.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
|
||||
// this.codeGraph.anchor.set(0.5);
|
||||
// this.codeGraph.style.fill = SignalColorEnum.codeColor;
|
||||
// this.codeGraph.position.set(0, signalConsts.nameOffsetY);
|
||||
Signal.paint(this, this.datas);
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalTemplate extends JlGraphicTemplate<Signal> {
|
||||
codeColor: string;
|
||||
codeFontSize: number;
|
||||
direction: string;
|
||||
verticalLampPostLength: number;
|
||||
levelLampPostLength: number;
|
||||
lineWidth: number;
|
||||
lampRadius: number;
|
||||
lampPostColor: string;
|
||||
lampColor: string;
|
||||
humanControlColor: string;
|
||||
fleetModeColor: string;
|
||||
logicModeColor: string;
|
||||
humanControlPath: number[];
|
||||
logicModeLineWidth: number;
|
||||
logicModeDistance: number;
|
||||
fleetModePath: number[];
|
||||
nameOffsetY: number;
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.codeColor = '0xff0000';
|
||||
this.codeFontSize = 11;
|
||||
this.direction = 'right';
|
||||
this.verticalLampPostLength = signalConsts.verticalLampPostLength;
|
||||
this.levelLampPostLength = signalConsts.levelLampPostLength;
|
||||
this.lineWidth = signalConsts.lineWidth;
|
||||
this.lampRadius = signalConsts.lampRadius;
|
||||
this.lampPostColor = SignalColorEnum.lampPostColor;
|
||||
this.lampColor = SignalColorEnum.lampColor;
|
||||
this.humanControlColor = SignalColorEnum.humanControlColor;
|
||||
this.fleetModeColor = SignalColorEnum.fleetModeColor;
|
||||
this.logicModeColor = SignalColorEnum.logicModeColor;
|
||||
this.humanControlPath = signalConsts.humanControlPath;
|
||||
this.logicModeLineWidth = signalConsts.logicModeLineWidth;
|
||||
this.logicModeDistance = signalConsts.logicModeDistance;
|
||||
this.nameOffsetY = signalConsts.nameOffsetY;
|
||||
const fleetModePath: number[] = [];
|
||||
signalConsts.fleetModePath.forEach((item: number, index: number) => {
|
||||
if (!(index % 2)) {
|
||||
fleetModePath.push(
|
||||
item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
|
||||
);
|
||||
} else {
|
||||
fleetModePath.push(item);
|
||||
}
|
||||
});
|
||||
this.fleetModePath = fleetModePath;
|
||||
}
|
||||
new(): Signal {
|
||||
return new Signal();
|
||||
|
||||
@ -6,8 +6,8 @@ import {
|
||||
JlGraphic,
|
||||
VectorText,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
import { ISignalData, Signal, SignalTemplate } from './Signal';
|
||||
import { LampBody } from './lampBody';
|
||||
|
||||
export interface ISignalDrawOptions {
|
||||
newData: () => ISignalData;
|
||||
@ -17,28 +17,17 @@ export class SignalDraw extends GraphicDrawAssistant<
|
||||
SignalTemplate,
|
||||
ISignalData
|
||||
> {
|
||||
point: Point = new Point(0, 0);
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
lampPost: Graphics = new Graphics();
|
||||
circularLamp: Graphics = new Graphics();
|
||||
humanControl: Graphics = new Graphics();
|
||||
fleetMode: Graphics = new Graphics();
|
||||
logicMode: Graphics = new Graphics();
|
||||
lampBody: LampBody = new LampBody();
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => ISignalData) {
|
||||
super(
|
||||
app,
|
||||
new SignalTemplate(),
|
||||
createData,
|
||||
'svguse:../drawIcon.svg#icon-signal',
|
||||
'信号机Signal'
|
||||
);
|
||||
super(app, new SignalTemplate(), createData, Signal.Type, '信号机Signal');
|
||||
this.container.addChild(this.codeGraph);
|
||||
this.container.addChild(this.lampPost);
|
||||
this.container.addChild(this.circularLamp);
|
||||
this.container.addChild(this.humanControl);
|
||||
this.container.addChild(this.fleetMode);
|
||||
this.container.addChild(this.logicMode);
|
||||
this.container.addChild(this.lampBody);
|
||||
signalInteraction.init(app);
|
||||
}
|
||||
|
||||
@ -56,86 +45,17 @@ export class SignalDraw extends GraphicDrawAssistant<
|
||||
this.createAndStore(true);
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
const { x, y } = this.toCanvasCoordinates(e.global);
|
||||
const p = new Point(x, y);
|
||||
this.point = p;
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
const template = this.graphicTemplate;
|
||||
this.point.set(p.x, p.y);
|
||||
this.lampPost.lineStyle(
|
||||
template.lineWidth,
|
||||
new Color(template.lampPostColor)
|
||||
);
|
||||
this.lampPost.moveTo(0, -template.verticalLampPostLength / 2);
|
||||
this.lampPost.lineTo(0, template.verticalLampPostLength / 2);
|
||||
|
||||
this.lampPost.moveTo(0, 0);
|
||||
this.lampPost.lineTo(template.levelLampPostLength, 0);
|
||||
|
||||
this.lampPost.position.set(p.x, p.y);
|
||||
this.circularLamp.beginFill(template.lampColor, 1);
|
||||
this.circularLamp.drawCircle(
|
||||
template.levelLampPostLength + template.lampRadius,
|
||||
0,
|
||||
template.lampRadius
|
||||
);
|
||||
this.circularLamp.endFill();
|
||||
this.circularLamp.position.set(p.x, p.y);
|
||||
this.humanControl.beginFill(template.humanControlColor, 1);
|
||||
this.humanControl.drawPolygon(template.humanControlPath);
|
||||
this.humanControl.endFill();
|
||||
this.humanControl.position.set(p.x, p.y);
|
||||
this.fleetMode.beginFill(template.fleetModeColor, 1);
|
||||
this.fleetMode.drawPolygon(template.fleetModePath);
|
||||
this.fleetMode.endFill();
|
||||
this.fleetMode.position.set(p.x, p.y);
|
||||
this.logicMode.lineStyle(
|
||||
template.logicModeLineWidth,
|
||||
new Color(template.logicModeColor)
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius -
|
||||
template.logicModeDistance,
|
||||
template.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius +
|
||||
template.logicModeDistance,
|
||||
-template.logicModeDistance
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius -
|
||||
template.logicModeDistance,
|
||||
-template.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius +
|
||||
template.logicModeDistance,
|
||||
template.logicModeDistance
|
||||
);
|
||||
this.logicMode.position.set(p.x, p.y);
|
||||
codeGraph.text = '信号机Signal';
|
||||
|
||||
codeGraph.style.fill = template.codeColor;
|
||||
codeGraph.setVectorFontSize(template.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.style.fill = template.codeColor;
|
||||
codeGraph.position.set(p.x, p.y + template.nameOffsetY);
|
||||
console.log(this);
|
||||
Signal.paint(this);
|
||||
this.container.position.set(p.x, p.y);
|
||||
}
|
||||
prepareData(data: ISignalData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.point = this.point;
|
||||
data.codeColor = template.codeColor;
|
||||
data.codeFontSize = template.codeFontSize;
|
||||
data.direction = template.direction;
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
84
src/graphics/signal/lampBody.ts
Normal file
84
src/graphics/signal/lampBody.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { Container } from '@pixi/display';
|
||||
import { Graphics, Color } from 'pixi.js';
|
||||
|
||||
export enum LampEnum {
|
||||
lampPostColor = '0xc0c0c0',
|
||||
lampDefaultColor = '0xff0000',
|
||||
logicModeColor = '0x000000',
|
||||
codeColor = '0X000000',
|
||||
}
|
||||
|
||||
const lampConsts = {
|
||||
verticalLampPostLength: 20,
|
||||
levelLampPostLength: 5,
|
||||
postLineWidth: 3,
|
||||
lampRadius: 10,
|
||||
logicModeLineWidth: 2,
|
||||
logicModeDistance: 7,
|
||||
};
|
||||
|
||||
export class LampBody extends Container {
|
||||
lampNum = 1;
|
||||
lampPost: Graphics = new Graphics();
|
||||
lamps: Graphics[] = [];
|
||||
logicModes: Graphics[] = [];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
paint(lampNum: number) {
|
||||
if (lampNum < 1) {
|
||||
throw new Error('信号机灯数量异常');
|
||||
}
|
||||
this.lampNum = lampNum;
|
||||
this.removeChildren(0);
|
||||
this.lampPost = new Graphics();
|
||||
this.lampPost.lineStyle(
|
||||
lampConsts.postLineWidth,
|
||||
new Color(LampEnum.lampPostColor)
|
||||
);
|
||||
this.lampPost.moveTo(0, -lampConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.lineTo(0, lampConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.moveTo(0, 0);
|
||||
this.lampPost.lineTo(lampConsts.levelLampPostLength, 0);
|
||||
this.addChild(this.lampPost);
|
||||
|
||||
this.lamps = [];
|
||||
this.logicModes = [];
|
||||
for (let i = 0; i < this.lampNum; i++) {
|
||||
const lamp = new Graphics();
|
||||
lamp.beginFill(LampEnum.lampDefaultColor, 1);
|
||||
const lampX =
|
||||
lampConsts.lampRadius * (i * 2 + 1) + lampConsts.levelLampPostLength;
|
||||
lamp.drawCircle(lampX, 0, lampConsts.lampRadius);
|
||||
lamp.endFill();
|
||||
this.addChild(lamp);
|
||||
this.lamps.push(lamp);
|
||||
const logicMode = new Graphics();
|
||||
logicMode.lineStyle(
|
||||
lampConsts.logicModeLineWidth,
|
||||
new Color(LampEnum.logicModeColor)
|
||||
);
|
||||
logicMode.moveTo(
|
||||
lampX - lampConsts.logicModeDistance,
|
||||
lampConsts.logicModeDistance
|
||||
);
|
||||
logicMode.lineTo(
|
||||
lampX + lampConsts.logicModeDistance,
|
||||
-lampConsts.logicModeDistance
|
||||
);
|
||||
logicMode.moveTo(
|
||||
lampX - lampConsts.logicModeDistance,
|
||||
-lampConsts.logicModeDistance
|
||||
);
|
||||
logicMode.lineTo(
|
||||
lampX + lampConsts.logicModeDistance,
|
||||
lampConsts.logicModeDistance
|
||||
);
|
||||
this.addChild(logicMode);
|
||||
this.logicModes.push(logicMode);
|
||||
}
|
||||
}
|
||||
|
||||
// setState() {}
|
||||
}
|
||||
@ -1 +1 @@
|
||||
Subproject commit 86de0cff9ee560f0c7e670184d5baccfdb28ee44
|
||||
Subproject commit f796e22d26890646ea0671fcaa11a571be6cb2fe
|
||||
Loading…
Reference in New Issue
Block a user