feat: auto ajust ctrl size when canvas resized

bilibili · Aug 16, 2024 · 47e1385 · 47e1385
1 parent 14f7cff
commit 47e1385
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/early-ties-agree.md b/.changeset/early-ties-agree.md
@@ -0,0 +1,5 @@
+---
+'@webav/av-canvas': patch
+---
+
+feat: auto ajust ctrl size when canvas resized
diff --git a/packages/av-canvas/src/av-canvas.ts b/packages/av-canvas/src/av-canvas.ts
@@ -103,10 +103,17 @@ export class AVCanvas {
 
     createEmptyOscillatorNode(this.#audioCtx).connect(this.#captureAudioDest);
 
-    Rect.CTRL_SIZE = 12 / (900 / this.#cvsEl.width);
+    const cvsResizeOb = new ResizeObserver((entries) => {
+      const fisrtEntry = entries[0];
+      if (fisrtEntry == null) return;
+      Rect.CTRL_SIZE = 10 / (fisrtEntry.contentRect.width / this.#cvsEl.width);
+    });
+    cvsResizeOb.observe(this.#cvsEl);
+
     this.#spriteManager = new SpriteManager();
 
     this.#clears.push(
+      () => cvsResizeOb.disconnect(),
       // 鼠标样式、控制 sprite 依赖 activeSprite，
       // activeSprite 需要在他们之前监听到 mousedown 事件 (代码顺序需要靠前)
       activeSprite(this.#cvsEl, this.#spriteManager),