feat: add transform:scale() UI scaling for 1920x1080 canvas

2026-06-12 16:23:49 +08:00
parent 0177af3416
commit 6a6414510e
5 changed files with 30 additions and 5 deletions
--- a/editor/index.html
+++ b/editor/index.html
@@ -4,7 +4,14 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>剧情编辑器 — 交互式电影游戏</title>
-    <link rel="stylesheet" href="./style.css" />
+    <style>
+      html, body { width: 100vw; height: 100vh; margin: 0; overflow: hidden; background: #0a0a16; }
+      #editor-app {
+        width: 1920px; height: 1080px;
+        transform-origin: top left;
+        transform: scale(var(--scale));
+      }
+    </style>
  </head>
  <body>
    <div id="editor-app"></div>
--- a/editor/main.ts
+++ b/editor/main.ts
@@ -2,6 +2,13 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import EditorApp from './App.vue'

+function applyScale() {
+  const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)
+  document.documentElement.style.setProperty('--scale', String(s))
+}
+applyScale()
+window.addEventListener('resize', applyScale)
+
 const app = createApp(EditorApp)
 app.use(createPinia())
 app.mount('#editor-app')