325 lines
13 KiB
HTML
325 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vue.js Inline Rendering Canvas Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.demo-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.canvas-wrapper {
|
|
position: relative;
|
|
height: 600px;
|
|
border: 1px solid #ddd;
|
|
margin: 20px 0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.rendering-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
cursor: grab;
|
|
}
|
|
|
|
.rendering-canvas:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.controls {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.view-button {
|
|
padding: 8px 16px;
|
|
border: 1px solid #2196F3;
|
|
background: white;
|
|
color: #2196F3;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.view-button:hover {
|
|
background: #2196F3;
|
|
color: white;
|
|
}
|
|
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status.connected {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status.disconnected {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="demo-container">
|
|
<h1>Vue.js 內嵌式渲染畫布示範</h1>
|
|
|
|
<div class="status" :class="isConnected ? 'connected' : 'disconnected'">
|
|
{{ isConnected ? '已連接' : '未連接' }}
|
|
<span v-if="sessionId">- Session: {{ sessionId }}</span>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="view-button" @click="setView('front')">前視圖</button>
|
|
<button class="view-button" @click="setView('back')">後視圖</button>
|
|
<button class="view-button" @click="setView('left')">左視圖</button>
|
|
<button class="view-button" @click="setView('right')">右視圖</button>
|
|
<button class="view-button" @click="setView('top')">頂視圖</button>
|
|
<button class="view-button" @click="setView('bottom')">底視圖</button>
|
|
<button class="view-button" @click="setView('isometric')">等角視圖</button>
|
|
<button class="view-button" @click="setView('home')">主視圖</button>
|
|
</div>
|
|
|
|
<div class="canvas-wrapper">
|
|
<canvas ref="canvas" class="rendering-canvas"></canvas>
|
|
</div>
|
|
|
|
<p>提示：使用滑鼠拖曳旋轉視圖，滾輪縮放，鍵盤 F1-F4 切換視圖</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
connection: null,
|
|
sessionId: null,
|
|
isConnected: false,
|
|
canvas: null,
|
|
ctx: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.canvas = this.$refs.canvas;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.connect();
|
|
},
|
|
beforeUnmount() {
|
|
if (this.connection) {
|
|
this.connection.stop();
|
|
}
|
|
},
|
|
methods: {
|
|
async connect() {
|
|
try {
|
|
this.connection = new signalR.HubConnectionBuilder()
|
|
.withUrl("/renderingHub")
|
|
.configureLogging(signalR.LogLevel.Information)
|
|
.build();
|
|
|
|
// 設置消息處理器
|
|
this.connection.on("ImageUpdate", (compressedData, originalLength, width, height) => {
|
|
this.handleImageUpdate(compressedData, originalLength, width, height);
|
|
});
|
|
|
|
this.connection.on("CanvasInitialized", (id) => {
|
|
this.sessionId = id;
|
|
console.log("畫布初始化完成，會話ID:", id);
|
|
this.loadTestObjects();
|
|
});
|
|
|
|
// 連接到服務器
|
|
await this.connection.start();
|
|
this.isConnected = true;
|
|
console.log("已連接到服務器");
|
|
|
|
// 初始化畫布
|
|
await this.initializeCanvas();
|
|
|
|
} catch (err) {
|
|
console.error("連接失敗:", err);
|
|
this.isConnected = false;
|
|
setTimeout(() => this.connect(), 5000);
|
|
}
|
|
},
|
|
|
|
async initializeCanvas() {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const width = Math.floor(rect.width);
|
|
const height = Math.floor(rect.height);
|
|
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
|
|
await this.connection.invoke("InitializeCanvas", width, height);
|
|
|
|
// 設置事件處理
|
|
this.setupEvents();
|
|
},
|
|
|
|
setupEvents() {
|
|
// 滑鼠事件
|
|
let isMouseDown = false;
|
|
let mouseButton = 0;
|
|
|
|
this.canvas.addEventListener('mousedown', async (e) => {
|
|
isMouseDown = true;
|
|
mouseButton = e.button;
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
await this.connection.invoke("HandleMouseDown", x, y, e.button);
|
|
});
|
|
|
|
this.canvas.addEventListener('mousemove', async (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const buttonMask = isMouseDown ? (1 << mouseButton) : 0;
|
|
await this.connection.invoke("HandleMouseMove", x, y, buttonMask);
|
|
});
|
|
|
|
this.canvas.addEventListener('mouseup', async (e) => {
|
|
isMouseDown = false;
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
await this.connection.invoke("HandleMouseUp", x, y, e.button);
|
|
});
|
|
|
|
this.canvas.addEventListener('wheel', async (e) => {
|
|
e.preventDefault();
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
await this.connection.invoke("HandleMouseWheel", x, y, e.deltaX, e.deltaY, "chrome");
|
|
});
|
|
|
|
this.canvas.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
// 鍵盤事件
|
|
this.canvas.tabIndex = 0;
|
|
this.canvas.addEventListener('keydown', async (e) => {
|
|
e.preventDefault();
|
|
await this.connection.invoke("HandleKeyDown", e.key, e.code, e.ctrlKey, e.shiftKey, e.altKey);
|
|
});
|
|
},
|
|
|
|
async handleImageUpdate(compressedData, originalLength, width, height) {
|
|
try {
|
|
// 解壓縮數據
|
|
const imageData = await this.decompressData(compressedData, originalLength);
|
|
|
|
// 創建 ImageData 對象並繪製到畫布
|
|
const imgData = new ImageData(new Uint8ClampedArray(imageData), width, height);
|
|
this.ctx.putImageData(imgData, 0, 0);
|
|
|
|
} catch (err) {
|
|
console.error("處理圖像更新時出錯:", err);
|
|
}
|
|
},
|
|
|
|
async decompressData(compressedData, originalLength) {
|
|
let bytes;
|
|
|
|
if (typeof compressedData === 'string') {
|
|
// Base64 字符串轉換
|
|
const binaryString = atob(compressedData);
|
|
bytes = new Uint8Array(binaryString.length);
|
|
for (let i = 0; i < binaryString.length; i++) {
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|
}
|
|
} else {
|
|
bytes = new Uint8Array(compressedData);
|
|
}
|
|
|
|
// 使用 DecompressionStream 解壓縮
|
|
const stream = new ReadableStream({
|
|
start(controller) {
|
|
controller.enqueue(bytes);
|
|
controller.close();
|
|
}
|
|
});
|
|
|
|
const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
|
|
const reader = decompressedStream.getReader();
|
|
const chunks = [];
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
chunks.push(value);
|
|
}
|
|
|
|
// 合併所有塊
|
|
const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
|
|
const result = new Uint8Array(totalLength);
|
|
let offset = 0;
|
|
for (const chunk of chunks) {
|
|
result.set(chunk, offset);
|
|
offset += chunk.length;
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
async setView(viewType) {
|
|
if (this.connection && this.connection.state === 'Connected') {
|
|
try {
|
|
await this.connection.invoke('SetView', viewType);
|
|
console.log(`視圖已切換到: ${viewType}`);
|
|
} catch (err) {
|
|
console.error(`切換視圖失敗: ${err}`);
|
|
}
|
|
}
|
|
},
|
|
|
|
async loadTestObjects() {
|
|
try {
|
|
const response = await fetch(`/api/rendering/test-objects/${this.sessionId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log('測試對象載入成功');
|
|
} else {
|
|
console.error('載入測試對象失敗');
|
|
}
|
|
} catch (err) {
|
|
console.error('載入測試對象時出錯:', err);
|
|
}
|
|
}
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |