如何通过用户脚本持久化App Inventor可滚动SVG的修改视图？

问题核心 #

直接修改blocklyBlockCanvas/blocklyBubbleCanvas的transform属性，或手动调整网格pattern的x/y值，只是临时改变DOM表现——Blockly内部通过scrollX/scrollY变量维护视图状态，在点击、滚动等交互触发时，会自动重置DOM属性覆盖你的手动修改。

可行解决方案 #

要持久化视图修改，必须直接操作Blockly工作区的核心状态，而非仅修改DOM：

1. 获取Blockly工作区实例 #

App Inventor中，Blockly主工作区可直接通过全局变量访问：

const workspace = Blockly.mainWorkspace;

2. 用官方API设置滚动位置 #

使用Blockly提供的scroll方法，直接修改工作区的滚动状态，这会自动同步DOM和网格pattern的位置：

// 替换number1/number2为你需要的滚动偏移值
workspace.scroll(number1, number2);

3. 强制锁定滚动状态（防止复位） #

若仍出现交互后复位的情况，可重写工作区的视图更新方法，强制使用自定义的滚动值：

// 保存原始的视图更新方法
const originalTranslate = workspace.translate_;
// 重写方法，固定使用自定义滚动位置
workspace.translate_ = function(x, y) {
  // 替换为你需要持久化的滚动偏移
  originalTranslate.call(this, yourCustomScrollX, yourCustomScrollY);
};

4. 替代方案：拦截滚动事件 #

如果需要阻止用户手动滚动干扰自定义视图，可监听并阻止工作区的滚动事件：

workspace.addEventListener('scroll', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

完整脚本示例 #

window.addEventListener('load', () => {
  const workspace = Blockly.mainWorkspace;
  // 自定义滚动偏移值
  const targetScrollX = 1356.7352240258992;
  const targetScrollY = -128.4999999999999;

  // 初始化设置滚动位置
  workspace.scroll(targetScrollX, targetScrollY);

  // 锁定视图，防止交互复位
  const originalTranslate = workspace.translate_;
  workspace.translate_ = function(x, y) {
    originalTranslate.call(this, targetScrollX, targetScrollY);
  };
});

内容的提问来源于stack exchange，提问作者MagTun