揭秘Scratch3.0 二次开发之增加积木删除区域标识交互，打造自定义化Scratch学习环境！

前端

2023-12-05 01:30:25

Scratch3.0二次开发

Scratch3.0作为一款流行的图形化编程语言，深受教育工作者和儿童的喜爱。借助其强大的扩展功能，我们可以对Scratch进行二次开发，打造更适合特定需求的学习环境。

增加积木删除区域标识交互

此次，我们将聚焦于增加积木删除区域的标识交互功能。这将使Scratch用户在删除积木时，能够更轻松地识别并选中目标积木，避免误删。

修改scratch-blocks库

定位代码位置

首先，我们需要找到scratch-blocks库中的相关代码位置。该代码位于“src/components/workspace/workspace-svg.jsx”文件中。

查找积木删除区域相关代码

在文件中搜索“workspace-drag-delete-handle”字符串，即可找到与积木删除区域相关的代码。

添加标识交互样式

在找到的代码中，添加以下样式代码：

.blocklyWorkspaceDragDeleteHandleHover {
  fill: #ff0000;
  stroke: #ff0000;
}

添加事件监听器

接下来，我们需要添加一个事件监听器，以侦听积木删除区域的鼠标悬停事件。添加如下代码：

Blockly.bindEvent_(
  workspace.getCanvas(),
  'mouseover',
  workspace.dragDeleteHandleTarget,
  function() {
    Blockly.addClass_(workspace.dragDeleteHandle_, 'blocklyWorkspaceDragDeleteHandleHover');
  }
);

添加事件移除器

最后，我们需要添加一个事件移除器，以便在鼠标离开积木删除区域时移除标识交互样式。添加如下代码：

Blockly.bindEvent_(
  workspace.getCanvas(),
  'mouseout',
  workspace.dragDeleteHandleTarget,
  function() {
    Blockly.removeClass_(workspace.dragDeleteHandle_, 'blocklyWorkspaceDragDeleteHandleHover');
  }
);

成果展示

完成以上步骤后，当Scratch用户将鼠标悬停在积木删除区域时，该区域将显示为红色，以便更好地识别和选中积木。

扩展应用

除了增加积木删除区域标识交互外，我们还可以对Scratch进行更多个性化定制，例如：