leil/xSynergy-manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
leilei
2025-10-21 11:26:12 +08:00
parent e0001ba430
commit 2b8e7349e6
4 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>互动白板</title> <title>xSynergy远程协作系统</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

7
src/core/index.js
View File

@@ -42,7 +42,7 @@ class Canvas extends EventEmitter {
const parent = this.canvas.parentElement; const parent = this.canvas.parentElement;
if (!parent) return; if (!parent) return;
const containerWidth = parent.offsetWidth; const containerWidth = parent.offsetWidth - 150;
const containerHeight = parent.offsetHeight; const containerHeight = parent.offsetHeight;
let width = containerWidth; let width = containerWidth;
@@ -72,11 +72,12 @@ class Canvas extends EventEmitter {
getShapes() { return this.shapes; } getShapes() { return this.shapes; }
setShapes(shapes) { this.shapes = shapes; this.render(); } setShapes(shapes) { this.shapes = shapes; this.render(); }
// 获取鼠标坐标，转换为百分比坐标
getMouseCoordinates(e) { getMouseCoordinates(e) {
const rect = this.canvas.getBoundingClientRect(); const rect = this.canvas.getBoundingClientRect();
return { return {
x: (e.clientX - rect.left) / this.canvas.width, x:((e.clientX - rect.left) / this.canvas.width).toFixed(4),
y: (e.clientY - rect.top) / this.canvas.height y:((e.clientY - rect.top) / this.canvas.height).toFixed(4)
}; };
} }

4
src/views/conferencingRoom/index.vue
View File

@@ -216,9 +216,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 邀请人员组件 -->
<InviterJoinRoom ref="inviterJoinRoomRef" @confirmSelection="handleConfirmSelection" />
</div> </div>
<!-- 邀请人员组件 -->
<InviterJoinRoom ref="inviterJoinRoomRef" @confirmSelection="handleConfirmSelection" />
</template> </template>
<script setup> <script setup>

11
src/views/custom/tabulaRase/index.vue
View File

@@ -99,8 +99,6 @@ function initWhiteboard() {
WhiteboardSync.init(canvas.value, roomUid); WhiteboardSync.init(canvas.value, roomUid);
} }
onMounted(async () => { onMounted(async () => {
try { try {
showLogin.value = false; showLogin.value = false;
@@ -121,7 +119,6 @@ onUnmounted(() => {
}); });
</script> </script>
<style scoped> <style scoped>
/* 外层容器全屏居中 */ /* 外层容器全屏居中 */
.wrapper-content { .wrapper-content {
@@ -131,7 +128,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
position: relative; position: relative; /* 关键：为绝对定位子元素提供参照 */
} }
/* 登录按钮容器居中 */ /* 登录按钮容器居中 */
@@ -145,7 +142,7 @@ onUnmounted(() => {
.whiteboard-wrapper { .whiteboard-wrapper {
position: relative; position: relative;
width: 72vw; width: 72vw;
height: 69vh; /* 或者适当的高度 */ height: 69vh;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -160,11 +157,11 @@ onUnmounted(() => {
display: block; display: block;
} }
/* 工具栏左侧垂直居中 */ /* 工具栏固定在 wrapper-content 内 */
.toolbox { .toolbox {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2vw; left: 40px; /* 距离左侧的间距 */
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1000; z-index: 1000;
} }