概述
Scratch3.0 二次开发系列,系列说明、Demo源码等请查看:《Scratch3.0 二次开发——开篇》
这次核心介绍如何给舞台区域添加一个“网格坐标标尺”,如下图所示:
- 控制网格坐标标尺的显示、隐藏
- 调节网格坐标标尺中字体的大小
- 其它细节可以自行添加。。。
思路
本质上,“网格坐标标尺”可以理解成跟角色、背景一样,也是一张图片(在 Scratch 体系中应该叫 Skin
),通俗来讲我理解成就是先画一张图片,然后把它渲染到舞台区域
实现细节
基于以上思路,锁定需要修改的地方:
- 在
demo-scratch-render
项目中- 添加
src/CoordinateSkin.js
文件,用来画“网格坐标标尺”的图片 - 在
src/RenderWebGL.js
文件中添加相关的控制函数:createCoordinateSkin
,创建一个皮肤,实现一个Scratch 网格坐标层updateCoordinateSkinFontSize
,更新网格坐标的字体大小setCoordinateVisible
,设置网格坐标的显示 or 隐藏getCoordinateVisible
,获取当前网格的可见状态
- 添加
- 在
demo-scratch-vm
项目中- 在
src/engine/runtime.js
文件中添加相关的控制函数:- 添加
this._coordinateSkinId
、this._coordinateDrawableId
,私有变量,用来记录坐标网格的 skinId 和 drawableId- PS:对于
skin
和drawable
,我的理解是,skin 是一张“图”,但真正画到舞台区域的是 drawable 这种类型的对象
- PS:对于
_createCoordinate
,私有函数,用来创建网格坐标,并记录其 skinId 和 drawableId_setCoordinateVisible
,私有函数,用来控制网格坐标的显示、隐藏triggerCoordinate
,对外暴露的函数,用来修改坐标网格的显示或隐藏状态setCoordinateFontSize
,对外暴露的函数,用来修改坐标网格的字体大小
- 添加
- 在
- 以上两步都是用来准备对应的接口函数,然后在
demo-scratch-gui
项目中添加相关交互控制:- 在
src/containers/stage-header.jsx
文件中,添加:handleTriggerCoordinate
,触发坐标网格的显示 or 隐藏handleZoomOutCoordinateFontSize
,缩小坐标系的字体handleZoomInCoordinateFontSize
,放大坐标系的字体
- 在
src/components/stage-header/stage-header.jsx
文件中绑定以上函数,并实现具体页面交互
- 在
详细细节请看以上项目代码中的注释,项目源码地址请查看:《Scratch3.0 二次开发——开篇》