自定义 Gizmo 进阶

上一篇 讲了如何自定义一个跟随节点移动并缩放的 Gizmo，这篇我们将实现一个可以编辑的 Gizmo

  1. class CustomGizmo extends Editor.Gizmo {
  2.     init () {
  3.         // 初始化一些参数
  4.     }
  6.     createGizmoCallBacks () {
  7.         // 创建 gizmo 操作回调
  9.         // 申明一些局部变量
  10.         let startRadius;        // 按下鼠标时记录的圆半径
  11.         let pressx, pressy;     // 按下鼠标时记录的鼠标位置
  12.         let updated;            // 记录 gizmo 是否被操作过
  14.         return {
  15.             /**
  16.              * 在 gizmo 上按下鼠标时触发
  17.              * @property x 按下点的 x 坐标
  18.              * @property y 按下点的 y 坐标
  19.              * @property event mousedown dom event
  20.              */
  21.             start: (x, y, event) => {
  22.                 startRadius = this.target.radius;
  23.                 pressx = x;
  24.                 pressy = y;
  25.                 updated = false;
  26.             },
  28.             /**
  29.              * 在 gizmo 上按下鼠标移动时触发
  30.              * @property dx 鼠标移动的 x 位移
  31.              * @property dy 鼠标移动的 y 位移
  32.              * @property event mousedown dom event
  33.              */
  34.             update: (dx, dy, event) => {
  35.                 if (dx === 0 && dy === 0) {
  36.                     return;
  37.                 }
  38.                 updated = true;
  40.                 // 获取 gizmo 依附的节点
  41.                 let node = this.node;
  43.                 // 记录节点信息的 undo 信息，注意参数为节点的 uuid
  44.                 _Scene.Undo.recordNode( node.uuid );
  46.                 // 获取 svg view 坐标系下点
  47.                 let x = pressx + dx, y = pressy + dy;
  48.                 // 获取节点世界坐标系下点
  49.                 let pos = this._view.pixelToWorld( cc.v2(x, y) );
  50.                 // 转换坐标点到节点下
  51.                 pos = node.convertToNodeSpaceAR(pos);
  52.                 // 计算 radius
  53.                 let radius = pos.mag();
  54.                 // js 在做一些计算后会出现小数位过长的情况， Editor.Math.toPrecision 会帮助做一些小数位的截取
  55.                 let minDifference = Editor.Math.numOfDecimalsF(1.0/this._view.scale);
  56.                 this.target.radius = Editor.Math.toPrecision(radius, minDifference);
  58.                 // 更新 gizmo view 
  59.                 this._view.repaintHost();
  60.             },
  62.             /**
  63.              * 在 gizmo 抬起鼠标时触发
  64.              * @property event mousedown dom event
  65.              */
  66.             end: (event) => {
  67.                 // 判断是否有操作过 gizmo, 没有则跳过处理
  68.                 if (updated) {
  69.                     // 如果 gizmo 有修改需要进入 animation 编辑的属性，需要调用此接口来更新数据
  70.                     // _Scene.AnimUtils.recordNodeChanged(this.node);
  72.                     // 推送修改到 undo 下，结束 undo
  73.                     _Scene.Undo.commit();
  74.                 }
  75.             }
  76.         };
  77.     }
  79.     onCreateRoot () {
  80.         // 创建 svg 根节点的回调，可以在这里创建你的 svg 工具
  81.         // this._root 可以获取到 Editor.Gizmo 创建的 svg 根节点
  83.         // 实例：
  85.         // 创建一个 svg 工具
  86.         // group 函数文档 : http://documentup.com/wout/svg.js#groups
  87.         this._tool = this._root.group();
  89.         let circle = this._tool.circle()
  90.             // 设置 circle fill 样式
  91.             .fill( { color: 'rgba(0,128,255,0.2)' } )
  92.             // 设置 circle stroke 样式
  93.             .stroke( { color: 'rgba(0,128,255,0.4)', width: 1 } )
  94.             // 设置 circle 的点击区域，这里设置的是根据 fill 模式点击
  95.             .style( 'pointer-events', 'fill' )
  96.             // 设置 circle 鼠标样式
  97.             .style( 'cursor', 'pointer' )
  98.             ;
  100.         // 为 tool 定义一个绘画函数，可以为其他名字
  101.         this._tool.plot =  (radius, position) => {
  102.             this._tool.move(position.x, position.y);
  103.             circle.radius(radius);
  104.         };
  106.         // 创建 gizmo 操作回调函数
  107.         let callbacks = this.createGizmoCallBacks();
  109.         // 为 tool 添加一个操作回调
  110.         // 当在 tool 上按下鼠标时，会创建一个 drag mask
  111.         // 如果不需要此辅助函数，可以自行对 tool 注册 mousedown, mousemove, mouseup 来进行操作
  112.         Editor.GizmosUtils.addMoveHandles( this._tool, {cursor: 'pointer'}, callbacks );
  113.     }
  115.     onUpdate () {
  116.         // 更新 svg 工具
  118.         // 获取 gizmo 依附的组件
  119.         let target = this.target;
  121.         // 获取 gizmo 依附的节点
  122.         let node = this.node;
  124.         // 获取组件半径
  125.         let radius = target.radius;
  127.         // 获取节点世界坐标
  128.         let worldPosition = node.convertToWorldSpaceAR(cc.p(0, 0));
  130.         // 转换世界坐标到 svg view 上
  131.         // svg view 的坐标体系和节点坐标体系不太一样，这里使用内置函数来转换坐标
  132.         let viewPosition = this._view.worldToPixel(worldPosition);
  134.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  135.         let p = Editor.GizmosUtils.snapPixelWihVec2( viewPosition );
  137.         // 获取世界坐标下圆半径
  138.         let worldPosition2 = node.convertToWorldSpaceAR(cc.p(radius, 0));
  139.         let worldRadius = worldPosition.sub(worldPosition2).mag();
  140.         worldRadius = Editor.GizmosUtils.snapPixel(worldRadius);
  142.         // 移动 svg 工具到坐标
  143.         this._tool.plot(worldRadius, p);
  144.     }
  145. }
  147. module.exports = CustomGizmo;