积木开发系列----装饰工具箱（ToolBox）

最新推荐文章于 2022-02-24 22:36:10 发布

CallMT

最新推荐文章于 2022-02-24 22:36:10 发布

阅读量623

点赞数

分类专栏：谷歌Blockly实战--玩转积木拼装文章标签： css javascript html

本文链接：https://blog.csdn.net/slash0781/article/details/120207601

版权

本文介绍了如何自定义Blockly的ToolBox样式，包括定义和注册自定义类别，修改类别项的背景色，使用CSS配置文件改变外观，添加选中状态，为特定类别和所有类别添加图标。通过覆盖Blockly的默认样式，实现了ToolBox视觉效果的个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有的Block都被分类归纳在ToolBox中。Blockly为工具箱定义的默认的风格，如下所示：
在这里插入图片描述
这里我们试着来改改这个风格，让他变个样子。

定义和注册自定义的类别

我把自定义的风格编写在“my_simple_category.js”文件中并在HTML文件中引入。

<script type="text/javascript" src="./js/my_simple_category.js"></script>

Blockly中，所有的自定义的类别都需要继承自Blockly.ToolboxCategory类。因此，在my_simple_category.js文件中添加这样的代码：

class MyCategory extends Blockly.ToolboxCategory {
   
  /**
   * @override
   */
  constructor(categoryDef, toolbox, opt_parent) {
   
    super(categoryDef, toolbox, opt_parent);
  }
}

然后，把MyCategory通过Blockly.registry.register注册到Blockly体系中，所以，在定义后调用这个方法：

class MyCategory extends Blockly.ToolboxCategory {
   
  /**
   * @override
   */
  constructor(categoryDef, toolbox, opt_parent) {
   
    super(categoryDef, toolbox, opt_parent);
  }
}

Blockly.registry.register(
    Blockly.registry.Type.TOOLBOX_ITEM,
    Blockly.ToolboxCategory.registrationName,
    MyCategory, true);

这样做的结果是，用MyCategory覆盖掉Blockly默认的类别。至此，我们就搭建好了一个框架，但是目前ToolBox仍然没有任何改变，只是把Blockly默认的类别替换成我们自定义的类别
注意：是最后一个参数，这里设置为true。如果设置为false，Blockly.registry.register方法将会抛出错误，因为你覆盖了一个已知的类。

修改类别项的外观

修改类别项的背景色

在ToolboxCategory类中，可以通过覆盖addColourBorder_方法来为整个类别项添加颜色。这样写：

class MyCategory extends Blockly.ToolboxCategory {
   
  /**
   * @override
   */
  constructor(categoryDef, toolbox, opt_parent) {
   
    super(categoryDef, toolbox, opt_parent);
  }
  
  /** @override */
  addColourBorder_(colour){
   
	  console.log("add_color::name= " + this.toolboxItemDef_.name +

最低0.47元/天解锁文章