车站去圆圈
This commit is contained in:
joylink_zhaoerwei
parent
8c0ed787f5
commit
190b9a9ac4
@ -8,40 +8,6 @@
|
||||
v-model="stationModel.code"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="hasCircle"
|
||||
:options="optionsCircle"
|
||||
label="是否有圆圈"
|
||||
/>
|
||||
<div v-if="stationModel.hasCircle">
|
||||
<q-item-label header>位置</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section no-wrap class="q-gutter-sm column">
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
label="x"
|
||||
v-model.number="circlePosition.x"
|
||||
type="number"
|
||||
step="any"
|
||||
class="col"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
label="y"
|
||||
v-model.number="circlePosition.y"
|
||||
type="number"
|
||||
step="any"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
@ -49,21 +15,10 @@
|
||||
import { StationData } from 'src/drawApp/graphics/StationInteraction';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const stationModel = reactive(new StationData());
|
||||
const hasCircle = ref('是');
|
||||
let circlePosition = ref({ x: 0, y: -20 });
|
||||
const optionsCircle = ['是', '否'];
|
||||
enum showSelect {
|
||||
是 = 'true',
|
||||
否 = 'false',
|
||||
}
|
||||
enum showSelectData {
|
||||
true = '是',
|
||||
false = '否',
|
||||
}
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
@ -71,7 +26,6 @@ watch(
|
||||
(val) => {
|
||||
if (val && val.type == Station.Type) {
|
||||
stationModel.copyFrom(val.saveData() as StationData);
|
||||
hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -80,15 +34,10 @@ onMounted(() => {
|
||||
const station = drawStore.selectedGraphic as Station;
|
||||
if (station) {
|
||||
stationModel.copyFrom(station.saveData());
|
||||
if (stationModel.childTransforms) {
|
||||
circlePosition.value = stationModel.childTransforms[0].transform.position;
|
||||
}
|
||||
hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
stationModel.hasCircle = JSON.parse((showSelect as never)[hasCircle.value]);
|
||||
const station = drawStore.selectedGraphic as Station;
|
||||
if (station) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
|
||||
|
||||
@ -25,12 +25,6 @@ export class StationData extends GraphicDataBase implements IStationData {
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get hasCircle(): boolean {
|
||||
return this.data.hasCircle;
|
||||
}
|
||||
set hasCircle(v: boolean) {
|
||||
this.data.hasCircle = v;
|
||||
}
|
||||
clone(): StationData {
|
||||
return new StationData(this.data.cloneMessage());
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Color, Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
@ -10,63 +9,33 @@ import { StationDraw } from './StationDrawAssistant';
|
||||
export interface IStationData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get hasCircle(): boolean; // 是否有圆圈--线网图
|
||||
set hasCircle(v: boolean);
|
||||
clone(): IStationData;
|
||||
copyFrom(data: IStationData): void;
|
||||
eq(other: IStationData): boolean;
|
||||
}
|
||||
|
||||
const stationConsts = {
|
||||
circleOffsetY: -20,
|
||||
radius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: '0xff0000',
|
||||
fillColor: '0xff0000',
|
||||
codeColor: '0xF48815',
|
||||
codeFontSize: 22,
|
||||
lineWidth: 3,
|
||||
};
|
||||
|
||||
export class Station extends JlGraphic {
|
||||
static Type = 'station';
|
||||
codeGraph: VectorText = new VectorText(''); //车站名
|
||||
circleGraphic: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.circleGraphic);
|
||||
this.circleGraphic.name = 'circle';
|
||||
}
|
||||
|
||||
get datas(): IStationData {
|
||||
return this.getDatas<IStationData>();
|
||||
}
|
||||
static draw(station: Station | StationDraw, datas?: IStationData): void {
|
||||
station.circleGraphic.clear();
|
||||
const codeGraph = station.codeGraph;
|
||||
codeGraph.text = datas?.code || '车站Station';
|
||||
codeGraph.style.fill = stationConsts.codeColor;
|
||||
codeGraph.setVectorFontSize(stationConsts.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
if (datas?.hasCircle) {
|
||||
const circleGraphic = station.circleGraphic;
|
||||
circleGraphic.lineStyle(
|
||||
stationConsts.borderWidth,
|
||||
new Color(stationConsts.borderColor)
|
||||
);
|
||||
circleGraphic.beginFill(stationConsts.fillColor, 1);
|
||||
circleGraphic.drawCircle(0, 0, stationConsts.radius);
|
||||
circleGraphic.endFill;
|
||||
if (datas.childTransforms?.length) {
|
||||
circleGraphic.position.set(
|
||||
datas.childTransforms[0].transform.position.x,
|
||||
datas.childTransforms[0].transform.position.y
|
||||
);
|
||||
} else {
|
||||
circleGraphic.position.set(0, stationConsts.circleOffsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
doRepaint(): void {
|
||||
Station.draw(this, this.datas);
|
||||
@ -74,12 +43,8 @@ export class Station extends JlGraphic {
|
||||
}
|
||||
|
||||
export class StationTemplate extends JlGraphicTemplate<Station> {
|
||||
hasCircle: boolean;
|
||||
radius: number;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.hasCircle = true;
|
||||
this.radius = stationConsts.radius;
|
||||
}
|
||||
new(): Station {
|
||||
return new Station();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FederatedPointerEvent, Point, Graphics } from 'pixi.js';
|
||||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
@ -18,7 +18,6 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
IStationData
|
||||
> {
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
circleGraphic: Graphics = new Graphics();
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => IStationData) {
|
||||
super(
|
||||
@ -52,9 +51,7 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(data: IStationData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.transform = this.container.saveTransform();
|
||||
data.hasCircle = template.hasCircle;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -77,21 +74,10 @@ export class stationInteraction extends GraphicInteractionPlugin<Station> {
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
if (g.datas.hasCircle) {
|
||||
g.circleGraphic.eventMode = 'static';
|
||||
g.circleGraphic.cursor = 'pointer';
|
||||
g.circleGraphic.draggable = true;
|
||||
g.circleGraphic.selectable = true;
|
||||
g.circleGraphic.transformSave = true;
|
||||
}
|
||||
}
|
||||
unbind(g: Station): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.circleGraphic.eventMode = 'none';
|
||||
g.circleGraphic.draggable = false;
|
||||
g.circleGraphic.selectable = false;
|
||||
g.circleGraphic.transformSave = false;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user