joylink
/
rtsa-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改矩形碰撞检测+动态加载绘制工具

This commit is contained in:
joylink_zhaoerwei 2024-10-10 17:19:36 +08:00
parent f6e0785633
commit 63eff006b0
4 changed files with 73 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/draw-app/properties/RectProperty.vue
View File

@ -61,6 +61,7 @@
<q-input
outlined
v-model="rectModel.alpha"
mask="#.###"
@blur="onUpdate"
label="透明度"
lazy-rules
@ -93,7 +94,7 @@
@blur="onUpdate"
label="圆角半径"
lazy-rules
:rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
:rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
/>
</q-form>
</template>

21
src/drawApp/iscsApp.ts
View File

@ -18,7 +18,10 @@ import {
} from './commonApp';
import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import {
CCTVButton,
CCTVButtonTemplate,
} from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { useDrawStore } from 'src/stores/draw-store';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
import { getDraft } from 'src/api/DraftApi';
@ -273,6 +276,7 @@ export function saveDrawDatas(app: IDrawApp) {
)
);
}
const graphics = app.queryStore.getAllGraphics();
switch (drawStore.selectSubmenuAndStation.submenu) {
case '火灾报警平面图':
for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
@ -310,6 +314,15 @@ export function saveDrawDatas(app: IDrawApp) {
app,
cctvOfStationControl
) as iscsGraphicData.CCTVOfStationControlStorage;
graphics.forEach((g) => {
if (g instanceof CCTVButton) {
const cctvButtonData = g.saveData();
cctvStorage.cctvButtons.push(
(cctvButtonData as CCTVButtonData).data
);
}
});
storage.cctvOfStationControlStorages[i] = cctvStorage;
break;
}
@ -319,12 +332,6 @@ export function saveDrawDatas(app: IDrawApp) {
default:
break;
}
const graphics = app.queryStore.getAllGraphics();
/* graphics.forEach((g) => {
if (TrackSection.Type === g.type) {
const trackSectionData = (g as TrackSection).saveData();
storage.trackSections.push((trackSectionData as TrackSectionData).data);
} }) */
console.log(storage, '保存数据', graphics);
const base64 = fromUint8Array(storage.serialize());
return base64;

26
src/graphics/rect/RectDrawAssistant.ts
View File

@ -1,9 +1,10 @@
import { FederatedPointerEvent, Graphics, Point } from 'pixi.js';
import { FederatedPointerEvent, Graphics, IHitArea, Point } from 'pixi.js';
import {
GraphicDrawAssistant,
GraphicInteractionPlugin,
IDrawApp,
JlGraphic,
linePoint,
} from 'jl-graphic';
import { IRectData, Rect, RectTemplate } from './Rect';
@ -72,6 +73,28 @@ export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
}
}
//碰撞检测
export class RectGraphicHitArea implements IHitArea {
rect: Rect;
constructor(rect: Rect) {
this.rect = rect;
}
contains(x: number, y: number): boolean {
let contains = false;
const datas = this.rect.datas;
const tolerance = datas.lineWidth;
const p1 = new Point(0, 0);
const p2 = new Point(p1.x + datas.width, p1.y);
const p3 = new Point(p1.x + datas.width, p1.y + datas.height);
const p4 = new Point(p1.x, p1.y + datas.height);
const p = new Point(x, y);
contains = contains || linePoint(p1, p2, p, tolerance);
contains = contains || linePoint(p2, p3, p, tolerance);
contains = contains || linePoint(p3, p4, p, tolerance);
contains = contains || linePoint(p4, p1, p, tolerance);
return contains;
}
}
export class rectInteraction extends GraphicInteractionPlugin<Rect> {
static Name = 'platform_transform';
constructor(app: IDrawApp) {
@ -88,6 +111,7 @@ export class rectInteraction extends GraphicInteractionPlugin<Rect> {
g.cursor = 'pointer';
g.scalable = true;
g.rotatable = true;
g.rectGraphic.hitArea = new RectGraphicHitArea(g);
}
unbind(g: Rect): void {
g.eventMode = 'none';

53
src/layouts/IscsDrawLayout.vue
View File

@ -305,7 +305,7 @@ function toggleRightDrawer() {
//工具栏所用
const selectUtil = ref();
const utilsOption: ControlItem[] = reactive([]);
let utilsOption: ControlItem[] = reactive([]);
function drawSelect(item: string) {
drawStore.getDrawApp().interactionPlugin(item).resume();
@ -327,6 +327,34 @@ class ControlItem {
}
}
}
function handleUtilsOption() {
utilsOption = [];
const drawAssistantsTypes = [
Arrow.Type,
TextContent.Type,
Rect.Type,
Line.Type,
];
switch (drawStore.selectSubmenuAndStation.submenu) {
case '监控布局图':
drawAssistantsTypes.push(CCTVButton.Type);
break;
}
drawAssistantsTypes.forEach((type) => {
const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
if (drawAssistant) {
utilsOption.push(
new ControlItem(
drawAssistant.name,
drawAssistant.icon,
drawAssistant.description || drawAssistant.name
)
);
}
});
drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
}
//左侧功能按钮
const leftMenuConfig = [
{ label: '保存', click: saveAllDrawDatas },
@ -364,26 +392,7 @@ onMounted(() => {
} else {
drawStore.setDraftId(null);
}
const drawAssistantsTypes = [
Arrow.Type,
TextContent.Type,
Rect.Type,
Line.Type,
CCTVButton.Type,
];
drawAssistantsTypes.forEach((type) => {
const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
if (drawAssistant) {
utilsOption.push(
new ControlItem(
drawAssistant.name,
drawAssistant.icon,
drawAssistant.description || drawAssistant.name
)
);
}
});
drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
handleUtilsOption();
});
const canvasWidth = ref(0);
@ -473,6 +482,7 @@ function selectedMenu(menuName: string) {
break;
}
}
handleUtilsOption();
}
const selectSubMenuName = ref('');
@ -480,6 +490,7 @@ const subMenuOption = ref([]);
function selectedSubMenu(subName: string) {
drawStore.selectSubmenuAndStation.submenu = subName;
forceReloadDate();
handleUtilsOption();
}
let iscsTypeConfig: {