自定义 Gizmo

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

创建自定义 Gizmo

这里演示创建一个简单的跟着节点移动并缩放的圆

  1. // 定义一个简单的 component, 并命名为 CustomComponent
  2. cc.Class({
  3. extends: cc.Component,
  4. properties:{
  5. radius:100
  6. },
  7. });
  1. classCustomGizmoextendsEditor.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.p(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.p(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 上了,当添加一个 CustomComponent 到节点上并选择这个节点时,就可以看到这个 gizmo 了。

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

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