【Scratch入门到精通】blocks 积木区风格定制

• 作者：约克
• 原文地址：https://yorkyu.cn/scratch-example-blocks-style-078ba0174e9a.html
• 文章版权归作者所有，转载请注明出处！

blog/20211010115741_0c378ae33fc1b58f64e2b6259c77c61b.png

一，前言

本文主要讲解，怎么定制 scratch-blocks 的积木区风格，如主题色，滚动条，积木工作区边界限制等。并深入源码，探究其根本。Github项目usetools/scratch-example/v1.0.1。由于scratch-blocks基于blockly二次开发，而blockly已迭代多个版本，在使用上会有所差异，后续作者会有文章，结合源码单独讲解blockly的使用。

1.1. 定制项概览

• 主题色
• 滚动条
• 积木工作区边界限制

1.2. 名词介绍

• 根容器 包裹所有积木工作区/积木分类菜单/积木弹出列表的容器，即class为 injectionDiv的节点
• 积木工作区（或工作区) 即积木可以拖放的积木代码区域
• 可视工作区 可以看到的工作区（不包括被积木分类菜单遮住的部分），随着滚动条的滚动，可视工作区中的内容在变化，但是可视工作区整体的宽度/高度是不变的。
• 内容矩形 当前角色所有工作区中的积木的边界组成的一个矩形的区域。
• 积木分类菜单 左侧积木分类列表的菜单
• 积木弹出列表 点击积木分类菜单才弹出的积木块列表，宽度固定为250
• 工作区坐标 工作区有一个坐标系，积木放置的位置都是在这个坐标系中。

blog/20211031093446_96ccc80ea7638c96d49ab30b3dbc9b24.png

1.3. 定制技术实现

实现scratch-blocks的定制的方法当前使用到的有：

• 通过入口函数inject()方法的入参options
• 借助Javascript语言中的函数重写能力
• 使用全局CSS样式覆盖

二，前置依赖项

2.1. 引入google-closure-library

google-closure-library 是一个功能强大的低级 JavaScript 库，旨在构建复杂且可扩展的 Web 应用程序。Webpack项目中使用时需要使用google-closure-library-webpack-plugin插件进行解析，具体配置如下：

安装依赖包

声明googTS描述 在文件src/react-app-env.d.ts添加下述描述

在项目中引用goog

三，执行定制

3.1 主题色

在scratch-blocks入口方法inject，参数opt_options提供了主题色的基础配置方式，常用配置项如下。点击查看scratch-examples使用

const blockOptions = {
  // 设置积木分类猜到/积木弹出列表到右边
  toolboxPosition: 'end',
  zoom: {
    wheel: false,
    // 积木缩放
    startScale: 0.8,
  },
  colours: {
    // 积木工作区 背景色 
    workspace: '#292b32',
    // 积木弹出列表，背景色 
    flyout: '#33353c',
    // 积木分类菜单，背景色 
    toolbox: '#1b1d23',
    // 积木分类菜单，选中颜色
    toolboxSelected: '#292b32',
    // 积木分类菜单，分类名称文本颜色
    toolboxText: '#d5c1c1',
    // 滚动条颜色
    scrollbar: 'rgba(255, 255, 255, 0.2)',
    // hover状态下，滚动条颜色
    scrollbarHover: 'rgba(255, 255, 255, 0.2)',
    insertionMarker: '#000000',
    insertionMarkerOpacity: 0.2,
    fieldShadow: 'rgba(255, 255, 255, 0.3)',
    dragShadowOpacity: 0.6
  },
};

从上述配置项，可知通过提供的opt_options定制能力有限，若需要更多复杂高级的风格定制，可使用CSS样式覆盖的方式，关注后续文章讲解。

3.2. 滚动条定制

3.2.1. 主题色

滚动条主题色定制见上一节3.1 主题色。

3.2.2. 滚动条位置

示例中把积木区垂直滚动条移动到了工作区左侧，其主要实现方式为重写scratch-blocks/scrollbar.js中的方法，重写后的方法如下。点击查看scratch-examples使用

// 移动垂直滚动条到工作区左侧
ScratchBlocks.Scrollbar.prototype.resizeViewVertical = function(hostMetrics) {}
// 设置工作区水平滚动条左侧流程滚动条厚度
ScratchBlocks.Scrollbar.prototype.resizeViewHorizontal = function(hostMetrics) {}

3.2.3. 滚动条可见性

工作区没有任何积木时，期望滚动条隐藏不可见。主要思想是：当内容区与可视区大小相等时，设置滚动条长度为0即可

// 设置垂直滚动条长度
ScratchBlocks.Scrollbar.prototype.resizeContentVertical = function(hostMetrics) {}
// 设置水平滚动条长度
ScratchBlocks.Scrollbar.prototype.resizeContentHorizontal = function(hostMetrics) {}

4. 积木工作区边界限制

由于scratch-bocks工作区的自由度较高，积木块可任意上下左右无限制的拖动。为了提升体验，示例中将限制工作区的上/左边界与可是工作区的上/左边界重叠。即：积木块不能拖动超出可视工作的上/左边界。重写后的方法如下。

4.1. 工作区大小限制

通过重新方法点击查看getContentDimensionsBounded_使用，实现思路：把工作区的上/左边界设置为0，当积木块拖动到可是工作区的上/左边界附近时，不会自动扩大工作区大小。

// 重新工作区边界方法 
ScratchBlocks.WorkspaceSvg.getContentDimensionsBounded_ = function(ws, svgSize) {}

4.2. 积木块移动距离

通过重新类方法点击查看Gesture使用，限制积木块拖动的距离，当超出可视工作区上/左边界时，对积木块移动距离重置，使其不超出可视工作区边界。其主要思想是：在鼠标拖动事件的移动距离计算方法中，重新计算移动距离

// 重新拖动距离方法
ScratchBlocks.Gesture.prototype.updateDragDelta_ = function(currentXY) {}

五，效果预览

blog/20211031111047_130e06ac0315130c1f6d1ffd054b7971.png

参考

• [1] scratch-blocks积木计算容器和定位容器的大致流程
• [2] google-closure-library-webpack-plugin/examples/goog-require-example