车站增加圆圈--线网图备用
This commit is contained in:
joylink_zhaoerwei
parent
4131233113
commit
528873959e
@ -41,6 +41,79 @@
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="hasCircle"
|
||||
:options="optionsCircle"
|
||||
label="是否有圆圈"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="stationModel.radius"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="半径"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '半径大小必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="stationModel.fillColor"
|
||||
@blur="onUpdate"
|
||||
label="填充颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
v-model="stationModel.fillColor"
|
||||
@change="
|
||||
(val) => {
|
||||
stationModel.fillColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="stationModel.borderWidth"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="边框宽度"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="stationModel.borderColor"
|
||||
@blur="onUpdate"
|
||||
label="边框颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
v-model="stationModel.borderColor"
|
||||
@change="
|
||||
(val) => {
|
||||
stationModel.borderColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
@ -48,10 +121,20 @@
|
||||
import { StationData } from 'src/examples/app/graphics/StationInteraction';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const stationModel = reactive(new StationData());
|
||||
const hasCircle = ref('是');
|
||||
const optionsCircle = ['是', '否'];
|
||||
enum showSelect {
|
||||
是 = 'true',
|
||||
否 = 'false',
|
||||
}
|
||||
enum showSelectData {
|
||||
true = '是',
|
||||
false = '否',
|
||||
}
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
@ -59,6 +142,7 @@ watch(
|
||||
(val) => {
|
||||
if (val && val.type == Station.Type) {
|
||||
stationModel.copyFrom(val.saveData() as StationData);
|
||||
hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -67,10 +151,12 @@ onMounted(() => {
|
||||
const station = drawStore.selectedGraphic as Station;
|
||||
if (station) {
|
||||
stationModel.copyFrom(station.saveData());
|
||||
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);
|
||||
|
||||
@ -95,10 +95,15 @@ message Platform {
|
||||
message Station {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
string codeColor = 3; // 车站字体颜色
|
||||
int32 codeFontSize = 4; // 车站字体大小
|
||||
Point point = 5; // 位置坐标
|
||||
|
||||
bool hasCircle = 3; // 是否有圆圈--线网图
|
||||
int32 radius = 4; // 半径
|
||||
int32 borderWidth = 5; // 边框线宽
|
||||
string borderColor = 6; // 边框颜色
|
||||
string fillColor = 7; // 圆填充颜色
|
||||
string codeColor = 8; // 车站字体颜色
|
||||
int32 codeFontSize = 9; // 车站字体大小
|
||||
Point point = 10; // 位置坐标
|
||||
Point circlePoint = 11; // 位置坐标
|
||||
}
|
||||
|
||||
message Train {
|
||||
|
||||
@ -26,6 +26,36 @@ 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;
|
||||
}
|
||||
get radius(): number {
|
||||
return this.data.radius;
|
||||
}
|
||||
set radius(v: number) {
|
||||
this.data.radius = v;
|
||||
}
|
||||
get borderWidth(): number {
|
||||
return this.data.borderWidth;
|
||||
}
|
||||
set borderWidth(v: number) {
|
||||
this.data.borderWidth = v;
|
||||
}
|
||||
get borderColor(): string {
|
||||
return this.data.borderColor;
|
||||
}
|
||||
set borderColor(v: string) {
|
||||
this.data.borderColor = v;
|
||||
}
|
||||
get fillColor(): string {
|
||||
return this.data.fillColor;
|
||||
}
|
||||
set fillColor(v: string) {
|
||||
this.data.fillColor = v;
|
||||
}
|
||||
get codeColor(): string {
|
||||
return this.data.codeColor;
|
||||
}
|
||||
@ -44,6 +74,12 @@ export class StationData extends GraphicDataBase implements IStationData {
|
||||
set point(point: IPointData) {
|
||||
this.data.point = new graphicData.Point({ x: point.x, y: point.y });
|
||||
}
|
||||
get circlePoint(): IPointData {
|
||||
return this.data.circlePoint;
|
||||
}
|
||||
set circlePoint(point: IPointData) {
|
||||
this.data.circlePoint = new graphicData.Point({ x: point.x, y: point.y });
|
||||
}
|
||||
clone(): StationData {
|
||||
return new StationData(this.data.cloneMessage());
|
||||
}
|
||||
|
||||
@ -1569,9 +1569,15 @@ export namespace graphicData {
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: Point;
|
||||
circlePoint?: Point;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
@ -1582,6 +1588,21 @@ export namespace graphicData {
|
||||
if ("code" in data && data.code != undefined) {
|
||||
this.code = data.code;
|
||||
}
|
||||
if ("hasCircle" in data && data.hasCircle != undefined) {
|
||||
this.hasCircle = data.hasCircle;
|
||||
}
|
||||
if ("radius" in data && data.radius != undefined) {
|
||||
this.radius = data.radius;
|
||||
}
|
||||
if ("borderWidth" in data && data.borderWidth != undefined) {
|
||||
this.borderWidth = data.borderWidth;
|
||||
}
|
||||
if ("borderColor" in data && data.borderColor != undefined) {
|
||||
this.borderColor = data.borderColor;
|
||||
}
|
||||
if ("fillColor" in data && data.fillColor != undefined) {
|
||||
this.fillColor = data.fillColor;
|
||||
}
|
||||
if ("codeColor" in data && data.codeColor != undefined) {
|
||||
this.codeColor = data.codeColor;
|
||||
}
|
||||
@ -1591,6 +1612,9 @@ export namespace graphicData {
|
||||
if ("point" in data && data.point != undefined) {
|
||||
this.point = data.point;
|
||||
}
|
||||
if ("circlePoint" in data && data.circlePoint != undefined) {
|
||||
this.circlePoint = data.circlePoint;
|
||||
}
|
||||
}
|
||||
}
|
||||
get common() {
|
||||
@ -1608,33 +1632,78 @@ export namespace graphicData {
|
||||
set code(value: string) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
get codeColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
|
||||
get hasCircle() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
|
||||
}
|
||||
set codeColor(value: string) {
|
||||
set hasCircle(value: boolean) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get codeFontSize() {
|
||||
get radius() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
|
||||
}
|
||||
set codeFontSize(value: number) {
|
||||
set radius(value: number) {
|
||||
pb_1.Message.setField(this, 4, value);
|
||||
}
|
||||
get borderWidth() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
|
||||
}
|
||||
set borderWidth(value: number) {
|
||||
pb_1.Message.setField(this, 5, value);
|
||||
}
|
||||
get borderColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
|
||||
}
|
||||
set borderColor(value: string) {
|
||||
pb_1.Message.setField(this, 6, value);
|
||||
}
|
||||
get fillColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 7, "") as string;
|
||||
}
|
||||
set fillColor(value: string) {
|
||||
pb_1.Message.setField(this, 7, value);
|
||||
}
|
||||
get codeColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 8, "") as string;
|
||||
}
|
||||
set codeColor(value: string) {
|
||||
pb_1.Message.setField(this, 8, value);
|
||||
}
|
||||
get codeFontSize() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
|
||||
}
|
||||
set codeFontSize(value: number) {
|
||||
pb_1.Message.setField(this, 9, value);
|
||||
}
|
||||
get point() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 5) as Point;
|
||||
return pb_1.Message.getWrapperField(this, Point, 10) as Point;
|
||||
}
|
||||
set point(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 5, value);
|
||||
pb_1.Message.setWrapperField(this, 10, value);
|
||||
}
|
||||
get has_point() {
|
||||
return pb_1.Message.getField(this, 5) != null;
|
||||
return pb_1.Message.getField(this, 10) != null;
|
||||
}
|
||||
get circlePoint() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 11) as Point;
|
||||
}
|
||||
set circlePoint(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 11, value);
|
||||
}
|
||||
get has_circlePoint() {
|
||||
return pb_1.Message.getField(this, 11) != null;
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
|
||||
}): Station {
|
||||
const message = new Station({});
|
||||
if (data.common != null) {
|
||||
@ -1643,6 +1712,21 @@ export namespace graphicData {
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
if (data.hasCircle != null) {
|
||||
message.hasCircle = data.hasCircle;
|
||||
}
|
||||
if (data.radius != null) {
|
||||
message.radius = data.radius;
|
||||
}
|
||||
if (data.borderWidth != null) {
|
||||
message.borderWidth = data.borderWidth;
|
||||
}
|
||||
if (data.borderColor != null) {
|
||||
message.borderColor = data.borderColor;
|
||||
}
|
||||
if (data.fillColor != null) {
|
||||
message.fillColor = data.fillColor;
|
||||
}
|
||||
if (data.codeColor != null) {
|
||||
message.codeColor = data.codeColor;
|
||||
}
|
||||
@ -1652,15 +1736,24 @@ export namespace graphicData {
|
||||
if (data.point != null) {
|
||||
message.point = Point.fromObject(data.point);
|
||||
}
|
||||
if (data.circlePoint != null) {
|
||||
message.circlePoint = Point.fromObject(data.circlePoint);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
@ -1668,6 +1761,21 @@ export namespace graphicData {
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
if (this.hasCircle != null) {
|
||||
data.hasCircle = this.hasCircle;
|
||||
}
|
||||
if (this.radius != null) {
|
||||
data.radius = this.radius;
|
||||
}
|
||||
if (this.borderWidth != null) {
|
||||
data.borderWidth = this.borderWidth;
|
||||
}
|
||||
if (this.borderColor != null) {
|
||||
data.borderColor = this.borderColor;
|
||||
}
|
||||
if (this.fillColor != null) {
|
||||
data.fillColor = this.fillColor;
|
||||
}
|
||||
if (this.codeColor != null) {
|
||||
data.codeColor = this.codeColor;
|
||||
}
|
||||
@ -1677,6 +1785,9 @@ export namespace graphicData {
|
||||
if (this.point != null) {
|
||||
data.point = this.point.toObject();
|
||||
}
|
||||
if (this.circlePoint != null) {
|
||||
data.circlePoint = this.circlePoint.toObject();
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -1687,12 +1798,24 @@ export namespace graphicData {
|
||||
writer.writeMessage(1, this.common, () => this.common.serialize(writer));
|
||||
if (this.code.length)
|
||||
writer.writeString(2, this.code);
|
||||
if (this.hasCircle != false)
|
||||
writer.writeBool(3, this.hasCircle);
|
||||
if (this.radius != 0)
|
||||
writer.writeInt32(4, this.radius);
|
||||
if (this.borderWidth != 0)
|
||||
writer.writeInt32(5, this.borderWidth);
|
||||
if (this.borderColor.length)
|
||||
writer.writeString(6, this.borderColor);
|
||||
if (this.fillColor.length)
|
||||
writer.writeString(7, this.fillColor);
|
||||
if (this.codeColor.length)
|
||||
writer.writeString(3, this.codeColor);
|
||||
writer.writeString(8, this.codeColor);
|
||||
if (this.codeFontSize != 0)
|
||||
writer.writeInt32(4, this.codeFontSize);
|
||||
writer.writeInt32(9, this.codeFontSize);
|
||||
if (this.has_point)
|
||||
writer.writeMessage(5, this.point, () => this.point.serialize(writer));
|
||||
writer.writeMessage(10, this.point, () => this.point.serialize(writer));
|
||||
if (this.has_circlePoint)
|
||||
writer.writeMessage(11, this.circlePoint, () => this.circlePoint.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -1709,14 +1832,32 @@ export namespace graphicData {
|
||||
message.code = reader.readString();
|
||||
break;
|
||||
case 3:
|
||||
message.codeColor = reader.readString();
|
||||
message.hasCircle = reader.readBool();
|
||||
break;
|
||||
case 4:
|
||||
message.codeFontSize = reader.readInt32();
|
||||
message.radius = reader.readInt32();
|
||||
break;
|
||||
case 5:
|
||||
message.borderWidth = reader.readInt32();
|
||||
break;
|
||||
case 6:
|
||||
message.borderColor = reader.readString();
|
||||
break;
|
||||
case 7:
|
||||
message.fillColor = reader.readString();
|
||||
break;
|
||||
case 8:
|
||||
message.codeColor = reader.readString();
|
||||
break;
|
||||
case 9:
|
||||
message.codeFontSize = reader.readInt32();
|
||||
break;
|
||||
case 10:
|
||||
reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
|
||||
break;
|
||||
case 11:
|
||||
reader.readMessage(message.circlePoint, () => message.circlePoint = Point.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { Color, Graphics, IPointData, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
@ -9,12 +9,24 @@ import {
|
||||
export interface IStationData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get hasCircle(): boolean; // 是否有圆圈--线网图
|
||||
set hasCircle(v: boolean);
|
||||
get radius(): number; // 半径
|
||||
set radius(v: number);
|
||||
get borderWidth(): number; // 线宽
|
||||
set borderWidth(v: number);
|
||||
get borderColor(): string; // 圆边框线色
|
||||
set borderColor(v: string);
|
||||
get fillColor(): string; // 圆填充颜色
|
||||
set fillColor(v: string);
|
||||
get codeColor(): string; // 车站字体颜色
|
||||
set codeColor(v: string);
|
||||
get codeFontSize(): number; // 车站字体大小
|
||||
set codeFontSize(v: number);
|
||||
get point(): IPointData; // 位置坐标
|
||||
set point(point: IPointData);
|
||||
get circlePoint(): IPointData; // 位置坐标
|
||||
set circlePoint(point: IPointData);
|
||||
clone(): IStationData;
|
||||
copyFrom(data: IStationData): void;
|
||||
eq(other: IStationData): boolean;
|
||||
@ -23,15 +35,19 @@ export interface IStationData extends GraphicData {
|
||||
export class Station extends JlGraphic {
|
||||
static Type = 'station';
|
||||
codeGraph: VectorText = new VectorText(''); //站台旁数字、字符
|
||||
circleGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.circleGraphic = new Graphics();
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.circleGraphic);
|
||||
}
|
||||
|
||||
get datas(): IStationData {
|
||||
return this.getDatas<IStationData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.circleGraphic.clear();
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
const codeGraph = this.codeGraph;
|
||||
if (this.datas.code == '') {
|
||||
@ -42,16 +58,42 @@ export class Station extends JlGraphic {
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.setVectorFontSize(this.datas.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
if (this.datas.hasCircle) {
|
||||
const circleGraphic = this.circleGraphic;
|
||||
circleGraphic.lineStyle(
|
||||
this.datas.borderWidth,
|
||||
new Color(this.datas.borderColor)
|
||||
);
|
||||
circleGraphic.beginFill(this.datas.fillColor, 1);
|
||||
circleGraphic.drawCircle(0, 0, this.datas.radius);
|
||||
circleGraphic.endFill;
|
||||
circleGraphic.position.set(
|
||||
this.datas.circlePoint.x,
|
||||
this.datas.circlePoint.y
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class StationTemplate extends JlGraphicTemplate<Station> {
|
||||
hasCircle: boolean;
|
||||
radius: number;
|
||||
borderWidth: number;
|
||||
borderColor: string;
|
||||
fillColor: string;
|
||||
codeColor: string;
|
||||
codeFontSize: number;
|
||||
circlePoint: IPointData;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.hasCircle = false;
|
||||
this.radius = 5;
|
||||
this.borderWidth = 1;
|
||||
this.borderColor = '0xff0000';
|
||||
this.fillColor = '0xff0000';
|
||||
this.codeColor = '0xF48815';
|
||||
this.codeFontSize = 22;
|
||||
this.circlePoint = new Point(0, -20);
|
||||
}
|
||||
new(): Station {
|
||||
return new Station();
|
||||
|
||||
@ -57,8 +57,14 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
prepareData(data: IStationData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.point = this.point;
|
||||
data.hasCircle = template.hasCircle;
|
||||
data.radius = template.radius;
|
||||
data.borderWidth = template.borderWidth;
|
||||
data.borderColor = template.borderColor;
|
||||
data.fillColor = template.fillColor;
|
||||
data.codeColor = template.codeColor;
|
||||
data.codeFontSize = template.codeFontSize;
|
||||
data.circlePoint = template.circlePoint;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user