自定义 Gizmo

目前 Gizmo 使用 svg.js 作为操作工具, 具体 svg.js 的 api 可以参考 http://documentup.com/wout/svg.js

创建自定义 Gizmo

我们来演示一下如何创建一个简单的可以跟着节点移动并缩放的圆

1、首先在 资源管理器 中新建一个名为 CustomComponent 的 JavaScript 脚本，加入以下内容：

  1. // 定义一个简单的 component, 并命名为 CustomComponent
  2. cc.Class({
  3.     extends: cc.Component,
  5.     properties: {
  6.         radius: 100
  7.     },
  8. });

2、在 Creator 菜单栏中选择 扩展 -> 创建新扩展插件 -> 全局扩展／项目专用扩展 新建一个扩展包，并命名为 custom-gizmo。

3、点击 Creator 右上角的 工程目录，在 package -> custom-gizmo 目录下新增 custom-gizmo.js 文件，加入以下内容：

  1. class CustomGizmo extends Editor.Gizmo {
  2.     init () {
  3.         // 初始化一些参数
  4.     }
  6.     onCreateRoot () {
  7.         // 创建 svg 根节点的回调，可以在这里创建你的 svg 工具
  8.         // this._root 可以获取到 Editor.Gizmo 创建的 svg 根节点
  10.         // 实例：
  12.         // 创建一个 svg 工具
  13.         // group 函数文档 : http://documentup.com/wout/svg.js#groups
  14.         this._tool = this._root.group();
  16.         // 画一个的圆
  17.         // circle 函数文档 : http://documentup.com/wout/svg.js#circle
  18.         let circle = this._tool.circle();
  20.         // 为 tool 定义一个绘画函数，可以为其他名字
  21.         this._tool.plot = (radius, position) => {
  22.             this._tool.move(position.x, position.y);
  23.             circle.radius(radius);
  24.         };
  25.     }
  27.     onUpdate () {
  28.         // 在这个函数内更新 svg 工具
  30.         // 获取 gizmo 依附的组件
  31.         let target = this.target;
  33.         // 获取 gizmo 依附的节点
  34.         let node = this.node;
  36.         // 获取组件半径
  37.         let radius = target.radius;
  39.         // 获取节点世界坐标
  40.         let worldPosition = node.convertToWorldSpaceAR(cc.v2(0, 0));
  42.         // 转换世界坐标到 svg view 上
  43.         // svg view 的坐标体系和节点坐标体系不太一样，这里使用内置函数来转换坐标
  44.         let viewPosition = this.worldToPixel(worldPosition);
  46.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  47.         let p = Editor.GizmosUtils.snapPixelWihVec2( viewPosition );
  49.         // 获取世界坐标下圆半径
  50.         let worldPosition2 = node.convertToWorldSpaceAR(cc.v2(radius, 0));
  51.         let worldRadius = worldPosition.sub(worldPosition2).mag();
  52.         worldRadius = Editor.GizmosUtils.snapPixel(worldRadius);
  54.         // 移动 svg 工具到坐标
  55.         this._tool.plot(worldRadius, p);
  56.     }
  58. // 如果需要自定义 Gizmo 显示的时机，重写 visible 函数即可
  59. //    visible () {
  60. //        return this.selecting || this.editing;
  61. //    }
  63. // Gizmo 创建在哪个 Layer 中 : foreground, scene, background
  64. // 默认创建在 scene Layer
  65. //    layer () {
  66. //        return 'scene';
  67. //    }
  69. // 如果 Gizmo 需要参加点击测试，重写 rectHitTest 函数即可
  70. //    rectHitTest (rect, testRectContains) {
  71. //        return false;
  72. //    }
  73. }
  75. module.exports = CustomGizmo;

注册自定义 Gizmo

在你的自定义 package 里的 package.json 中定义 gizmos 字段, 并注册上你的自定义 Gizmo，如下所示：

  1. "gizmos": {
  2.     "CustomComponent": "packages://custom-gizmo/custom-gizmo.js"
  3. }

CustomComponent ：Component 名字 packages://custom-gizmo/custom-gizmo.js ：CustomGizmo 路径

这样就将 CustomGizmo 注册到 CustomComponent 上了。

然后，在 层级管理器 中选择要添加 gizmo 的节点，在 属性检查器 中选择 添加组件 -> 用户脚本组件 -> CustomComponent，就可以看到这个 gizmo 显示在 场景编辑器 中。如果无法看到 gizmo 请刷新编辑器或者重启编辑器。

请阅读下一篇 自定义 Gizmo 进阶

更多 Gizmo Api 请参考 Gizmo Api 更多 Gizmo 实例请参考 Gizmo 实例