道岔修改
This commit is contained in:
Yuan
parent
24ba22faea
commit
49bd440f2f
@ -1,4 +1,4 @@
|
||||
import { Color, Graphics, IPointData } from 'pixi.js';
|
||||
import { Graphics, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
@ -10,8 +10,6 @@ import {
|
||||
export interface ITurnoutData extends GraphicData {
|
||||
get code(): string;
|
||||
set code(code: string);
|
||||
get forkPoint(): IPointData;
|
||||
set forkPoint(point: IPointData);
|
||||
get pointA(): IPointData;
|
||||
set pointA(point: IPointData);
|
||||
get pointB(): IPointData;
|
||||
@ -63,20 +61,21 @@ export class Turnout extends JlGraphic {
|
||||
get datas(): ITurnoutData {
|
||||
return this.getDatas<ITurnoutData>();
|
||||
}
|
||||
|
||||
get states(): ITurnoutState {
|
||||
return this.getStates<ITurnoutState>();
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
const { pointA, pointB, pointC, forkPoint } = this.datas;
|
||||
const intersectB = Turnout.getIntersectionPoint(forkPoint, 20, pointB);
|
||||
const intersectC = Turnout.getIntersectionPoint(forkPoint, 20, pointC);
|
||||
const { pointA, pointB, pointC } = this.datas;
|
||||
const intersectB = Turnout.getIntersectionPoint(20, pointB);
|
||||
const intersectC = Turnout.getIntersectionPoint(20, pointC);
|
||||
|
||||
this.graphics.sections
|
||||
.clear()
|
||||
.lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
|
||||
.moveTo(pointA.x, pointA.y)
|
||||
.lineTo(forkPoint.x, forkPoint.y)
|
||||
.lineTo(0, 0)
|
||||
.moveTo(pointB.x, pointB.y)
|
||||
.lineTo(intersectB.x, intersectB.y)
|
||||
.moveTo(pointC.x, pointC.y)
|
||||
@ -85,24 +84,19 @@ export class Turnout extends JlGraphic {
|
||||
this.graphics.fork
|
||||
.clear()
|
||||
.lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
|
||||
.moveTo(forkPoint.x, forkPoint.y)
|
||||
.moveTo(0, 0)
|
||||
.lineTo(intersectB.x, intersectB.y);
|
||||
|
||||
this.graphics.label.text = this.datas.code;
|
||||
this.graphics.label.position.set(
|
||||
this.datas.forkPoint.x + 20,
|
||||
this.datas.forkPoint.y + 20
|
||||
);
|
||||
this.graphics.label.position.set(20, 20);
|
||||
|
||||
console.log(1);
|
||||
}
|
||||
|
||||
static getIntersectionPoint(
|
||||
c: IPointData,
|
||||
r: number,
|
||||
p: IPointData
|
||||
): IPointData {
|
||||
const len = Math.sqrt((c.x - p.x) ** 2 + (c.y - p.y) ** 2);
|
||||
static getIntersectionPoint(r: number, p: IPointData): IPointData {
|
||||
const len = Math.sqrt((-p.x) ** 2 + (-p.y) ** 2);
|
||||
const scale = r / len;
|
||||
return { x: c.x + scale * (p.x - c.x), y: c.y + scale * (p.y - c.y) };
|
||||
return { x: scale * p.x, y: scale * p.y };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {
|
||||
DraggablePoint,
|
||||
GraphicApp,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
@ -13,21 +12,13 @@ import {
|
||||
TurnoutConsts,
|
||||
TurnoutTemplate,
|
||||
} from './Turnout';
|
||||
import {
|
||||
DisplayObject,
|
||||
FederatedMouseEvent,
|
||||
Graphics,
|
||||
IHitArea,
|
||||
IPointData,
|
||||
Point,
|
||||
} from 'pixi.js';
|
||||
import { DisplayObject, FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
|
||||
|
||||
export class TurnoutDraw extends GraphicDrawAssistant<
|
||||
TurnoutTemplate,
|
||||
ITurnoutData
|
||||
> {
|
||||
graphic = new Graphics();
|
||||
point: Point = new Point(0, 0);
|
||||
turnout: Turnout;
|
||||
constructor(app: JlDrawApp, createData: () => ITurnoutData) {
|
||||
super(
|
||||
app,
|
||||
@ -36,53 +27,38 @@ export class TurnoutDraw extends GraphicDrawAssistant<
|
||||
'sym_o_ramp_left',
|
||||
'道岔Turnout'
|
||||
);
|
||||
this.container.addChild(this.graphic);
|
||||
|
||||
this.turnout = this.graphicTemplate.new();
|
||||
this.container.addChild(this.turnout);
|
||||
|
||||
TurnoutPointsEditPlugin.init(app);
|
||||
}
|
||||
|
||||
onLeftDown(e: FederatedMouseEvent): void {
|
||||
console.log(e);
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
this.turnout.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
prepareData(data: ITurnoutData): boolean {
|
||||
data.forkPoint = this.point;
|
||||
data.forkPoint = this.point;
|
||||
const { pointA, pointB, pointC } = this.getDefaultEndPoint(this.point);
|
||||
data.transform = this.turnout.saveTransform();
|
||||
const { pointA, pointB, pointC } = this.getDefaultEndPoint();
|
||||
data.pointA = pointA;
|
||||
data.pointB = pointB;
|
||||
data.pointC = pointC;
|
||||
data.code = '道岔编码';
|
||||
data.code = 'A000000';
|
||||
return true;
|
||||
}
|
||||
|
||||
getDefaultEndPoint(p: IPointData): {
|
||||
pointA: IPointData;
|
||||
pointB: IPointData;
|
||||
pointC: IPointData;
|
||||
} {
|
||||
getDefaultEndPoint() {
|
||||
return {
|
||||
pointA: new Point(p.x + 50, p.y),
|
||||
pointB: new Point(p.x - 50, p.y),
|
||||
pointC: new Point(p.x - 50, p.y - 50),
|
||||
pointA: new Point(50, 0),
|
||||
pointB: new Point(-50, 0),
|
||||
pointC: new Point(-50, -50),
|
||||
};
|
||||
}
|
||||
|
||||
redraw(cp: Point): void {
|
||||
const { pointA, pointB, pointC } = this.getDefaultEndPoint(cp);
|
||||
|
||||
const intersectC = Turnout.getIntersectionPoint(cp, 20, pointC);
|
||||
|
||||
this.graphic
|
||||
.clear()
|
||||
.lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
|
||||
.moveTo(pointA.x, pointA.y)
|
||||
.lineTo(cp.x, cp.y)
|
||||
.moveTo(pointB.x, pointB.y)
|
||||
.lineTo(cp.x, cp.y)
|
||||
.moveTo(pointC.x, pointC.y)
|
||||
.lineTo(intersectC.x, intersectC.y);
|
||||
|
||||
this.point.set(cp.x, cp.y);
|
||||
this.turnout.position.copyFrom(cp);
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,44 +68,31 @@ export class TurnoutHitArea implements IHitArea {
|
||||
this.turnout = turnout;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
const { pointA, pointB, pointC, forkPoint } = this.turnout.datas;
|
||||
const { pointA, pointB, pointC } = this.turnout.datas;
|
||||
return (
|
||||
linePoint(pointA, forkPoint, { x, y }, TurnoutConsts.lineWidth) ||
|
||||
linePoint(pointB, forkPoint, { x, y }, TurnoutConsts.lineWidth) ||
|
||||
linePoint(pointC, forkPoint, { x, y }, TurnoutConsts.lineWidth)
|
||||
linePoint(pointA, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
|
||||
linePoint(pointB, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
|
||||
linePoint(pointC, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// function onEditPointCreate(
|
||||
// g: ILineGraphic,
|
||||
// dp: DraggablePoint,
|
||||
// index: number
|
||||
// ): void {
|
||||
// const link = g as Link;
|
||||
// if (index === 0 || index == link.datas.points.length - 1) {
|
||||
// // 端点
|
||||
// dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
// if (e.isShift()) {
|
||||
// link.getGraphicApp().setOptions({
|
||||
// absorbablePositions: buildAbsorbablePositions(link),
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
export class TurnoutPointsEditPlugin extends GraphicInteractionPlugin<Turnout> {
|
||||
static Name = 'TurnoutPointsDrag';
|
||||
static init(app: JlDrawApp) {
|
||||
return new TurnoutPointsEditPlugin(app);
|
||||
}
|
||||
|
||||
constructor(app: GraphicApp) {
|
||||
super(TurnoutPointsEditPlugin.Name, app);
|
||||
}
|
||||
|
||||
bind(g: Turnout): void {
|
||||
g.graphics.sections.eventMode = 'static';
|
||||
g.graphics.sections.cursor = 'pointer';
|
||||
g.graphics.fork.eventMode = 'static';
|
||||
g.graphics.fork.cursor = 'pointer';
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.hitArea = new TurnoutHitArea(g);
|
||||
// g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: Turnout): void {
|
||||
@ -137,14 +100,6 @@ export class TurnoutPointsEditPlugin extends GraphicInteractionPlugin<Turnout> {
|
||||
}
|
||||
onSelected(g: DisplayObject) {
|
||||
console.log(g);
|
||||
// const turnout = g as Turnout;
|
||||
// let editPlugin = turnout.getAssistantAppend<PolylineEditPlugin>(
|
||||
// PolylineEditPlugin.Name
|
||||
// );
|
||||
// if (!editPlugin) {
|
||||
// // editPlugin = new PolylineEditPlugin(turnout, { onEditPointCreate });
|
||||
// // turnout.addAssistantAppend(editPlugin);
|
||||
// }
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Turnout.Type) as Turnout[];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user