scratch学习笔记
【摘要】 一些关于scratch的学习笔记，仅供参考
-
源码结构
官方文档：https://developers.google.com/blockly/reference/js/blockly.astnode_class?hl=zh-cn
scratch-gui │ ├── build # 编译后的文件夹 │ ├── static # 静态资源：scratch内部需要一些文件 │ ├── chunks # scratch核心加载器 │ ├── index.html # scratch编辑器 │ ├── player.html # scratch播放器 │ ├── xxx.html # 默认的还会生成两个文件，可以从webpack.config.js去掉，加快编译 │ ├── lib.min.js # scratch核心：开发模式时21M左右，生产模式打包的14M左右 ├── dist # 编译后的文件夹：带BUILD_MODE=dist时生成。用于集成到www版本中，此处无用 ├── node_modules # 整个项目依赖模块库，有很多，重点需要处理的是多语言库 │ ├── scratch-l10n # 多语言库：建议只保留中文及英文，可以大大的减小lib.min.js ├── src │ ├── components # UI组件 │ ├── containers # 容器组件，承载容器组件业务逻辑 │ ├── css # 全局通用css │ ├── examples # 集成测试用例 │ ├── extensions # 拓展案例 │ └── lib # 插件及高阶组件 │ ├── audio # 声音插件 │ ├── backpack # 背包插件 │ ├── default-project # 默认项目 │ ├── libraries # 素材库相关 │ ├── video # 视频模块 │ ├── playground # 编译后页面的模版 │ └──reducers # 全局状态控制 ├── test # 测试用例 ├── translations # 多语言翻译模板库 ├── README.md # 项目说明文件 ├── package.json # 项目编译、打包、依赖列表文件 └── webpack.config.js # webpack配置文件：生成、打包Scratch
-
toolbox里面包含flyout_base, flyout_base包含workspace。
-
flyout_base有两个实现：flyout_horizontal(横排列)，flyout_vertical(竖排列)
-
worksapce是积木块的容器，ui实现有workspace_svg
-
积木块实现是block.js，ui现实有block_svg，block_svg又现实了两种排列：block_render_svg_horizontal(横排列)和block_render_svg_vertical(竖排列)
二、DOM树结构
每个积木块代码实例是Block，都有svg（dom节点）、xml描述，功能块Xml.js提供相应的转换。每个block的dom节点在class='blocklyBlockCanvas'上，class='blocklyBlockCanvas'上层是class='blocklyWorkspace'，对应是WorkspaceSvg代码实例，Scratch-Blocks的整一个dom入口是class=‘injectionDiv’，简化结构如下：
class=‘injectionDiv’
｜—— class='blocklyToolboxDiv'
｜—— class='blocklySvg'
｜ ｜—— class='blocklyWorkspace'
｜ ｜—— class='blocklyBlockCanvas'
｜ ｜—— class='blocklyBubbleCanvas'
｜—— class='blocklyFlyout'
｜—— class='blocklyWorkspace'
｜—— class='blocklyBlockCanvas'
｜—— class='blocklyBubbleCanvas'
-
logo修改
打开gui/src/components/menu-bar
修改该文件，替换为scratch-logo.png，并且搜索后修改两处为scratch-logo.svg的地方
具体源码地址：
-
Make-toolbox-xml
参考资料：https://zhuanlan.zhihu.com/p/180378190
一个motion类的生成
一个类的xml是由category元素包裹着的，由若干个block子元素组成的集合。
<category name="运动" id="motion" colour="#4C97FF" secondaryColour="#3373CC"> <block type="motion_turnright"> <value name="DEGREES"> <shadow type="math_number"> <field name="NUM">15</field> </shadow> </value> </block> <block type="motion_turnleft"> <value name="DEGREES"> <shadow type="math_number"> <field name="NUM">15</field> </shadow> </value> </block> </category>
category的属性：
-
name 类的名称
-
id 类的id
-
color
value的属性：
这个在block定义中设置arg参数类型为“input_value"时才有效
name 参数名，vm的blocks在定义函数的时候，或在生成代码的时候会用到参数。
shadow的属性：
shadow是输出值的块，它块的定义和moton这些类不一样，里面有个output属性来决定是输出number,还是string,outputShape决定了块的形状。
-
scratch-blocks中的blocks的类型、定义和使用方法
scratch-gui的blocks的生成文件在scratch-blocks\blocks_vertical里。
-
“message0“：表示块里显示的字符串，%1,%2表示块里的字段field,块里有1个field是%1，有两个field是按先后顺序设为%1,%2,以此类推
-
”args0”:里面的数组元素对应上面设置的field,args0[0]对应%1，args0[1]对应%2，…。每个元素对象表示设置了的field的类型
-
“extensions”："colours_motion"设置块的颜色
-
"shape_statement"设置了块的形状
blocks块的使用
定义好的block块，使用的时候要把加到xml文件里，文件地址:scratch-gui\src\lib\make-toolbox-xml.js,找到对应的类，这里是motion.
-
部分积木了解
输入积木
input_value类型： Blockly.Blocks[分类id + 自定义名称] = { init: function() { this.jsonInit({ "message0": Blockly.Msg[自定义名称], "args0": [ { "type": "input_value", "name": "MODELNAME" } ], "category": Blockly.Categories.xxxx, "extensions": ["colours_xxx", "output_xxx"] }) } }
下拉积木
field_dropdown类型： Blockly.Blocks[分类id + 自定义名称] = { init: function() { this.jsonInit({ "message0": "%1", "args0": [ { "type": "field_dropdown", "name": "MODELNAME", "options": [ // 需注意options不能为空，必须包含一个，若有语言包需要再message.js文件下定义（不然浏览器英文状态会爆找不到alt） ['', ''] ] } ], "category": Blockly.Categories.xxx, "extensions": ["colours_xxx", "output_xxx"] }) } }
是否在舞台显示功能
例： 一：blocks项目进行积木注册（checkboxInFlyout属性） Blockly.Blocks['looks_screenshotbackdropnumbername'] = { /** * Block to report costume's number or name * @this Blockly.Block */ init: function() { this.jsonInit({ "message0": Blockly.Msg.LOOKS_SCREENSHOTNUMBERNAME, "args0": [ { "type": "field_dropdown", "name": "NUMBER_NAME", "options": [ [Blockly.Msg.LOOKS_NUMBERNAME_BACKDROP, 'backdrop'] ] } ], "category": Blockly.Categories.looks, "checkboxInFlyout": true, // 是否勾选舞台显示功能 "extensions": ["colours_looks", "output_number"] }); } }; 二： 1，gui项目添加默认积木列表（src/lib/make-toolbox-xml） 2，gui项目添加labelFn事件（src/lib/opcode-label） 三：vm项目对响应事件进行注册
-
修改菜单栏
删除【语言切换】、【教程】、即将启用等菜单
坐标依然是menu-bar.jsx文件，而且还是MenuBar组件的render方法。
粗暴的方法： 直接删除这段代码 更文艺的方法： 从代码可以看到，这个菜单是否出现，由属性this.props.canChangeLanguage来判断，所以我们只需要这个属性值为false就行了。
修改名称：
暴力方法：注释掉formattedmessage这段代码，修改为“保存”，可以直接进行修改，不考虑多语言的情况。
优雅的方法：在Scratch-l10n 源码中，找到文件：scratch-l10n-master\editor\interface\zh-cn.json后进行修改
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）