feat:更新画板工具栏显示问题

2025-10-21 11:26:12 +08:00
parent e0001ba430
commit 2b8e7349e6
4 changed files with 13 additions and 15 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>互动白板</title>
+    <title>xSynergy远程协作系统</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -42,7 +42,7 @@ class Canvas extends EventEmitter {
        const parent = this.canvas.parentElement; 
        if (!parent) return;

-        const containerWidth = parent.offsetWidth;
+        const containerWidth = parent.offsetWidth - 150;
        const containerHeight = parent.offsetHeight;
       
        let width = containerWidth;
@@ -72,11 +72,12 @@ class Canvas extends EventEmitter {
    getShapes() { return this.shapes; }
    setShapes(shapes) { this.shapes = shapes; this.render(); }

+    // 获取鼠标坐标，转换为百分比坐标
    getMouseCoordinates(e) {
        const rect = this.canvas.getBoundingClientRect();
        return {
-            x: (e.clientX - rect.left) / this.canvas.width,
-            y: (e.clientY - rect.top) / this.canvas.height
+            x:((e.clientX - rect.left) / this.canvas.width).toFixed(4),
+            y:((e.clientY - rect.top) / this.canvas.height).toFixed(4)
        };
    }

--- a/src/views/conferencingRoom/index.vue
+++ b/src/views/conferencingRoom/index.vue
@@ -216,9 +216,9 @@
                </div>
            </div>
        </div> 
-    </div>
         <!-- 邀请人员组件 -->
        <InviterJoinRoom ref="inviterJoinRoomRef" @confirmSelection="handleConfirmSelection" />
+    </div> 
 </template>

 <script setup>
--- a/src/views/custom/tabulaRase/index.vue
+++ b/src/views/custom/tabulaRase/index.vue
@@ -99,8 +99,6 @@ function initWhiteboard() {
    WhiteboardSync.init(canvas.value, roomUid);
 }

-
-
 onMounted(async () => { 
    try {
        showLogin.value = false;
@@ -121,7 +119,6 @@ onUnmounted(() => {
 });
 </script>

-
 <style scoped>
 /* 外层容器全屏居中 */
 .wrapper-content {
@@ -131,7 +128,7 @@ onUnmounted(() => {
    width: 100%;
    height: 100%;
    background: #fff;
-    position: relative;
+    position: relative; /* 关键：为绝对定位子元素提供参照 */
 }

 /* 登录按钮容器居中 */
@@ -145,7 +142,7 @@ onUnmounted(() => {
 .whiteboard-wrapper {
    position: relative;
    width: 72vw;  
-    height: 69vh; /* 或者适当的高度 */
+    height: 69vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
@@ -160,11 +157,11 @@ onUnmounted(() => {
    display: block;
 }

-/* 工具栏左侧垂直居中 */
+/* 工具栏固定在 wrapper-content 内 */
 .toolbox {
    position: absolute;
    top: 50%;
-    left: 2vw;
+    left: 40px; /* 距离左侧的间距 */
    transform: translateY(-50%);
    z-index: 1000;
 }