Scratch3.0 二次开发——网格坐标标尺

626 阅读2分钟

概述

Scratch3.0 二次开发系列,系列说明、Demo源码等请查看:《Scratch3.0 二次开发——开篇》

这次核心介绍如何给舞台区域添加一个“网格坐标标尺”,如下图所示:

网格坐标-Demo.gif

  1. 控制网格坐标标尺的显示、隐藏
  2. 调节网格坐标标尺中字体的大小
  3. 其它细节可以自行添加。。。

思路

本质上,“网格坐标标尺”可以理解成跟角色、背景一样,也是一张图片(在 Scratch 体系中应该叫 Skin),通俗来讲我理解成就是先画一张图片,然后把它渲染到舞台区域

实现细节

基于以上思路,锁定需要修改的地方:

  1. demo-scratch-render 项目中
    • 添加 src/CoordinateSkin.js 文件,用来画“网格坐标标尺”的图片
    • src/RenderWebGL.js 文件中添加相关的控制函数:
      • createCoordinateSkin,创建一个皮肤,实现一个Scratch 网格坐标层
      • updateCoordinateSkinFontSize,更新网格坐标的字体大小
      • setCoordinateVisible,设置网格坐标的显示 or 隐藏
      • getCoordinateVisible,获取当前网格的可见状态
  2. demo-scratch-vm 项目中
    • src/engine/runtime.js 文件中添加相关的控制函数:
      • 添加 this._coordinateSkinIdthis._coordinateDrawableId,私有变量,用来记录坐标网格的 skinId 和 drawableId
        • PS:对于 skindrawable,我的理解是,skin 是一张“图”,但真正画到舞台区域的是 drawable 这种类型的对象
      • _createCoordinate,私有函数,用来创建网格坐标,并记录其 skinId 和 drawableId
      • _setCoordinateVisible,私有函数,用来控制网格坐标的显示、隐藏
      • triggerCoordinate,对外暴露的函数,用来修改坐标网格的显示或隐藏状态
      • setCoordinateFontSize,对外暴露的函数,用来修改坐标网格的字体大小
  3. 以上两步都是用来准备对应的接口函数,然后在 demo-scratch-gui 项目中添加相关交互控制:
    • src/containers/stage-header.jsx 文件中,添加:
      • handleTriggerCoordinate,触发坐标网格的显示 or 隐藏
      • handleZoomOutCoordinateFontSize,缩小坐标系的字体
      • handleZoomInCoordinateFontSize,放大坐标系的字体
    • src/components/stage-header/stage-header.jsx 文件中绑定以上函数,并实现具体页面交互

详细细节请看以上项目代码中的注释,项目源码地址请查看:《Scratch3.0 二次开发——开篇》