feat(showcase): add scale option

config/_project_json.yaml

@@ -16,6 +16,7 @@ localization:
     ui_operator_logo: Operator Logo
     ui_translate_x: X Axis Position
     ui_translate_y: Y Axis Position
+    ui_scale: Scale
     ui_position_title: <hr><h4>⚠️ Posistion</h4><hr>
     ui_position_padding_bottom: Padding Bottom
     ui_position_padding_left: Padding Left
@@ -55,6 +56,7 @@ localization:
     ui_operator_logo: 干员图标
     ui_translate_x: X 轴位置
     ui_translate_y: Y 轴位置
+    ui_scale: 比例
     ui_position_title: <hr><h4>⚠️ 位置</h4><hr>
     ui_position_padding_bottom: 底部距离
     ui_position_padding_left: 左部距离
@@ -276,6 +278,15 @@ properties:
      text: ui_useStartAnimation_title
      type: bool
      value: true
+  - key: scale
+    value: 
+     text: ui_scale
+     type: slider
+     value: 1
+     fraction: true
+     max: 10
+     min: 0
+     step: 0.1
   - key: position
     value: 
      text: ui_position_title

src/components/settings.js

@@ -16,6 +16,7 @@ export default class Settings {
   #defaultPadRight = getPercentage(`${import.meta.env.VITE_VIEWPORT_RIGHT}%`)
   #defaultPadTop = getPercentage(`${import.meta.env.VITE_VIEWPORT_TOP}%`)
   #defaultPadBottom = getPercentage(`${import.meta.env.VITE_VIEWPORT_BOTTOM}%`)
+  #defaultScale = 1
   #defaultLogoX = 0
   #defaultLogoY = 0
   #defaultViewport = {
@@ -34,6 +35,7 @@ export default class Settings {
   #padRight = this.#defaultPadRight
   #padTop = this.#defaultPadTop
   #padBottom = this.#defaultPadBottom
+  #scale = this.#defaultScale
   #logoX = this.#defaultLogoX
   #logoY = this.#defaultLogoY
   #isInsightsInited = false
@@ -219,6 +221,14 @@ export default class Settings {
     })
   }
 
+  setScale(value) {
+    this.#scale = value
+  }
+
+  get scale() {
+    return 1 / this.#scale
+  }
+
   positionPadding(key, value) {
     switch (key) {
       case "left":
@@ -260,6 +270,10 @@ export default class Settings {
     document.getElementById("position_padding_bottom_input").value = this.#defaultPadBottom
   }
   
+  scaleReset() {
+    this.#scale = this.#defaultScale
+  }
+
   elementPosition(el, x, y) {
     const computedStyle = getComputedStyle(el)
     const elWidth = computedStyle.width
@@ -318,6 +332,7 @@ export default class Settings {
 
   reset() {
     this.positionReset()
+    this.scaleReset()
     this.setLogoRatio(this.#defaultRatio)
     document.getElementById("logo_ratio_slider").value = this.#defaultRatio
     document.getElementById("logo_ratio_input").value = this.#defaultRatio
@@ -499,6 +514,11 @@ export default class Settings {
             </div>
           </div>
         </div>
+        <div>
+          <label for="scale">Scale</label>
+          <input type="range" min="0" max="10" step="0.1" id="scale_slider" value="${this.#scale}" />
+          <input type="number" id="scale_input" name="scale" value="${this.#scale}" step="0.1"/>
+        </div>
         <div>
           <label for="position">Position</label>
           <input type="checkbox" id="position" name="position" />
@@ -735,6 +755,16 @@ export default class Settings {
           _this.#showRelated(e.currentTarget, "position_realted");
           if (!e.currentTarget.checked) _this.positionReset();
         }
+      }, {
+        id: "scale_slider", event: "input", handler: e => {
+          _this.#sync(e.currentTarget, "scale_input");
+          _this.setScale(e.currentTarget.value);
+        }
+      }, {
+        id: "scale_input", event: "change", handler: e => {
+          _this.#sync(e.currentTarget, "scale_slider");
+          _this.setScale(e.currentTarget.value);
+        }
       }, {
         id: "position_padding_left_slider", event: "input", handler: e => {
           _this.#sync(e.currentTarget, "position_padding_left_input");

src/libs/spine-player.js

@@ -11389,7 +11389,8 @@ var spine;
 					}
 					var devicePixelRatio = window.devicePixelRatio || 1;
 					var viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
-					this.sceneRenderer.camera.zoom = viewport.width * devicePixelRatio / viewportSize.x;
+					// this.sceneRenderer.camera.zoom = viewport.width * devicePixelRatio / viewportSize.x;
+					this.sceneRenderer.camera.zoom = viewport.width * devicePixelRatio / viewportSize.x * window.settings.scale;
 					this.sceneRenderer.camera.position.x = viewport.x + viewport.width / 2;
 					this.sceneRenderer.camera.position.y = viewport.y + viewport.height / 2;
 					this.sceneRenderer.begin();

src/libs/wallpaper_engine.js

@@ -111,6 +111,10 @@ window.wallpaperPropertyListener = {
                 window.settings.resetMusic()
             }
         }
+        if (properties.scale) {
+            window.settings.setScale(properties.scale.value)
+            window.settings.functionInsights("setScale", Object.keys(properties) !== 1)
+        }
         if (properties.position) {
             if (!properties.position.value) {
                 window.settings.positionReset()