|
@@ -66,7 +66,6 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|
|
import { Viewer2d, ViewerEvent, CoordinateUtils, THREE } from '@x-viewer/core';
|
|
import { Viewer2d, ViewerEvent, CoordinateUtils, THREE } from '@x-viewer/core';
|
|
|
- import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
|
|
|
|
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
|
import { useAppStoreWithOut } from '/@/store/modules/app';
|
|
import { useAppStoreWithOut } from '/@/store/modules/app';
|
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
@@ -187,9 +186,7 @@
|
|
|
const ws = appStore.getWidthScale;
|
|
const ws = appStore.getWidthScale;
|
|
|
const hs = appStore.getHeightScale;
|
|
const hs = appStore.getHeightScale;
|
|
|
const rect = container.getBoundingClientRect();
|
|
const rect = container.getBoundingClientRect();
|
|
|
- // X: (event.clientX / ws - rect.left) = NDC*clientWidth
|
|
|
|
|
- // Y: (event.clientY - rect.top) / hs = NDC*clientHeight (reversed)
|
|
|
|
|
- return new THREE.Vector2(e.clientX / ws - rect.left, (e.clientY - rect.top) / hs);
|
|
|
|
|
|
|
+ return new THREE.Vector2((e.clientX - rect.left) / ws, (e.clientY - rect.top) / hs);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function getHitResult(event: MouseEvent): { x: number; y: number } | null {
|
|
function getHitResult(event: MouseEvent): { x: number; y: number } | null {
|
|
@@ -395,10 +392,15 @@
|
|
|
|
|
|
|
|
console.log('[DWG] Viewer2d 就绪');
|
|
console.log('[DWG] Viewer2d 就绪');
|
|
|
|
|
|
|
|
|
|
+ const appStore = useAppStoreWithOut();
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
// === 参照官方示例: ViewerEvent.MouseClick ===
|
|
// === 参照官方示例: ViewerEvent.MouseClick ===
|
|
|
viewer.addEventListener(ViewerEvent.MouseClick, (data: any) => {
|
|
viewer.addEventListener(ViewerEvent.MouseClick, (data: any) => {
|
|
|
if (!viewer) return;
|
|
if (!viewer) return;
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
// 获取 world 坐标用于实时显示
|
|
// 获取 world 坐标用于实时显示
|
|
|
const container = document.getElementById(containerId);
|
|
const container = document.getElementById(containerId);
|
|
|
if (data?.event && container) {
|
|
if (data?.event && container) {
|
|
@@ -439,11 +441,13 @@
|
|
|
if (container) {
|
|
if (container) {
|
|
|
container.addEventListener('mousemove', (e: MouseEvent) => {
|
|
container.addEventListener('mousemove', (e: MouseEvent) => {
|
|
|
if (!viewer) return;
|
|
if (!viewer) return;
|
|
|
|
|
+ // const ws = appStore.getWidthScale;
|
|
|
|
|
+ // const hs = appStore.getHeightScale;
|
|
|
// 浮动圆点跟随鼠标(缩放校准后坐标,与 marker 放置位置一致)
|
|
// 浮动圆点跟随鼠标(缩放校准后坐标,与 marker 放置位置一致)
|
|
|
const sc = scaledScreenCoord(e, container);
|
|
const sc = scaledScreenCoord(e, container);
|
|
|
if (floatingDot && placingMode.value) {
|
|
if (floatingDot && placingMode.value) {
|
|
|
floatingDot.style.left = sc.x + 'px';
|
|
floatingDot.style.left = sc.x + 'px';
|
|
|
- floatingDot.style.top = sc.y + 'px';
|
|
|
|
|
|
|
+ floatingDot.style.top = sc.y + 'px';
|
|
|
}
|
|
}
|
|
|
// 世界坐标
|
|
// 世界坐标
|
|
|
const wp = CoordinateUtils.screen2World(sc, viewer.camera, container);
|
|
const wp = CoordinateUtils.screen2World(sc, viewer.camera, container);
|