Просмотр исходного кода

feat: IJS.canvas auto-sizing + responsive Power of Two

- IJS.canvas.create() now auto-fills fullscreen panel when called
  without arguments
- Added IJS.canvas.width() / height() for plugins to query dimensions
- Canvas centered in panel with CSS transform:translate(-50%,-50%)
- Power of Two: responsive layout adapts to any screen size
  using rx()/ry()/rf() relative sizing helpers

Co-Authored-By: Claude <noreply@anthropic.com>
nonvioce 3 месяцев назад
Родитель
Сommit
cd996c15b8
2 измененных файлов с 23 добавлено и 15 удалено
  1. 23 7
      app/src/main/assets/console.js
  2. 0 8
      app/src/main/assets/plugins/power_of_two.json

+ 23 - 7
app/src/main/assets/console.js

@@ -926,19 +926,35 @@ class SymjaConsole {
                     panel.innerHTML = '';
                     const c = document.createElement('canvas');
                     const dpr = window.devicePixelRatio || 1;
-                    c.width = (w || 600) * dpr;
-                    c.height = (h || 800) * dpr;
-                    c.style.width = (w || 600) + 'px';
-                    c.style.height = (h || 800) + 'px';
-                    c.style.maxWidth = '100%';
-                    c.style.maxHeight = '100%';
-                    c.style.objectFit = 'contain';
+                    // 自适应:未指定尺寸则填满全屏面板
+                    const cw = w || panel.clientWidth || window.innerWidth;
+                    const ch = h || panel.clientHeight || window.innerHeight;
+                    c.width = cw * dpr;
+                    c.height = ch * dpr;
+                    // CSS 精确填充
+                    Object.assign(c.style, {
+                        width: cw + 'px',
+                        height: ch + 'px',
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        objectFit: 'contain',
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)'
+                    });
                     this._canvas = c;
                     this._ctx = c.getContext('2d');
                     this._ctx.scale(dpr, dpr);
+                    this._logicalW = cw;
+                    this._logicalH = ch;
                     panel.appendChild(c);
                     return this._ctx;
                 },
+                /** 获取逻辑画布宽度(供插件做自适应布局) */
+                width: function() { return this._logicalW || 600; },
+                /** 获取逻辑画布高度 */
+                height: function() { return this._logicalH || 800; },
                 getContext: function() { return this._ctx; },
                 getSize: function() {
                     const dpr = window.devicePixelRatio || 1;

Разница между файлами не показана из-за своего большого размера
+ 0 - 8
app/src/main/assets/plugins/power_of_two.json


Некоторые файлы не были показаны из-за большого количества измененных файлов