Scratch3.0 二次开发：让超长积木在积木选区翩翩起舞！

前端

2023-12-14 21:58:13

释放 Scratch 的潜力：解决超长积木块的难题

Scratch 以其亲切的界面和强大的功能风靡全球，成为编程教育界的宠儿。然而，随着其应用的日益广泛，原本的设计逐渐无法满足开发者不断增长的需求。二次开发应运而生，赋予开发者定制和扩展 Scratch 功能的强大工具。

超长积木块的尴尬

在 Scratch 的积木选择区（flyout），积木块的大小受到限制。当积木内容较长时，就会被无情截断，只显示部分内容。对于开发者来说，这无疑是阻碍，特别是当积木块包含关键信息时。

解药：让积木自由舒展

为了解决这个痛点，本文将指导你修改 scratch-blocks 库，使其在积木选择区显示超长积木块。

一、引入 flyoutAdjustments.js

在 scratch-blocks 库的 core 目录中，新建一个名为 flyoutAdjustments.js 的文件。

二、扩展 flyout 的高度

在 flyoutAdjustments.js 文件中，添加以下代码：

Blockly.Flyout.prototype.auto_adjust_ = function() {
  let expected_height = 0;
  for (let i = 0; i < this.workspace_.getTopBlocks().length; i++) {
    const block_height = Blockly.blockRendering.ConstantProvider.prototype.MAX_BOTTOM_HEIGHT;
    if (block_height > expected_height) {
      expected_height = block_height;
    }
  }
  // 将预估高度设置到flyout
  this.height_ = expected_height;
  // 设置新的flyout高度
  this.svgGroup_.setAttribute('height', expected_height);
  this.svgBackground_.setAttribute('height', expected_height);
};

此代码根据积木块的高度动态调整 flyout 的高度，确保超长积木块也能完整显示。

三、注册扩展

在 scratch-blocks 库的 index.js 文件中，添加以下代码注册扩展：

import flyoutAdjustments from './core/flyoutAdjustments.js';
Blockly.registry.register(Blockly.registry.Type.FLYOUT_CONFIG, 'flyout_adjustments', flyoutAdjustments);

验证效果

完成以上步骤后，重新编译 scratch-blocks 库并将其引入 Scratch 项目。新建一个项目，在积木选择区添加一个超长积木块，你会欣喜地发现它终于可以完整显示了！

结语

通过修改 scratch-blocks 库，我们成功地拓展了 Scratch 3.0 的功能，使其支持在积木选择区显示超长积木块。这为开发者带来了极大的便利，使他们能够更灵活地使用 Scratch 开发各种项目。未来，我们将继续探索 Scratch 的二次开发，为开发者提供更多强大的工具，让 Scratch 成为编程教育领域的璀璨明珠。

常见问题解答