• 自定义 Gizmo
    • 创建自定义 Gizmo
    • 注册自定义 Gizmo

    自定义 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,
    4. properties: {
    5. radius: 100
    6. },
    7. });

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

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

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