自定义 Gizmo 进阶

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

  1. let ToolType = {
  2.     None: 0,
  3.     Side: 1,
  4.     Center: 2
  5. };
  8. class CustomGizmo extends Editor.Gizmo {
  9.     init () {
  10.         // 初始化一些参数
  11.     }
  13.     onCreateMoveCallbacks () {
  14.         // 创建 gizmo 操作回调
  16.         // 申明一些局部变量
  17.         let startOffset;        // 按下鼠标时记录的园偏移量
  18.         let startRadius;        // 按下鼠标时记录的圆半径
  19.         let pressx, pressy;     // 按下鼠标时记录的鼠标位置
  21.         return {
  22.             /**
  23.              * 在 gizmo 上按下鼠标时触发
  24.              * @param x 按下点的 x 坐标
  25.              * @param y 按下点的 y 坐标
  26.              * @param event mousedown dom event
  27.              */
  28.             start: (x, y, event) => {
  29.                 startRadius = this.target.radius;
  30.                 startOffset = this.target.offset;
  31.                 pressx = x;
  32.                 pressy = y;
  33.             },
  35.             /**
  36.              * 在 gizmo 上按下鼠标移动时触发
  37.              * @param dx 鼠标移动的 x 位移
  38.              * @param dy 鼠标移动的 y 位移
  39.              * @param event mousedown dom event
  40.              */
  41.             update: (dx, dy, event, type) => {
  42.                 // 获取 gizmo 依附的节点
  43.                 let node = this.node;
  45.                 // 获取 gizmo 依附的组件
  46.                 let target = this.target;
  48.                 if (type === ToolType.Center) {
  49.                     // 计算新的偏移量
  50.                     let t = cc.affineTransformClone( node.getWorldToNodeTransform() );
  51.                     t.tx = t.ty = 0;
  53.                     let d = cc.v2(cc.pointApplyAffineTransform(dx, dy, t)).add(startOffset);
  54.                     target.offset = d;
  55.                     this.adjustValue(target, 'offset');
  56.                 }
  57.                 else {
  58.                     // 转换坐标点到节点下
  59.                     let position = node.convertToNodeSpaceAR(cc.v2(pressx + dx, pressy + dy));
  60.                     // 计算 radius
  61.                     target.radius = position.sub(startOffset).mag();
  62.                     // 防止 radius 小数点位数过多
  63.                     this.adjustValue(target, 'radius');
  64.                 }
  65.             },
  67.             /**
  68.              * 在 gizmo 抬起鼠标时触发
  69.              * @param event mousedown dom event
  70.              */
  71.             end: (updated, event) => {
  72.             }
  73.         };
  74.     }
  76.     onCreateRoot () {
  77.         // 创建 svg 根节点的回调，可以在这里创建你的 svg 工具
  78.         // this._root 可以获取到 Editor.Gizmo 创建的 svg 根节点
  80.         // 实例：
  82.         // 创建一个 svg 工具
  83.         // group 函数文档 : http://documentup.com/wout/svg.js#groups
  84.         this._tool = this._root.group();
  86.         // 创建中心拖拽区域，用于操作 offset 属性
  87.         let dragArea = this._tool.circle()
  88.             // 设置 fill 样式
  89.             .fill( { color: 'rgba(0,128,255,0.2)' } )
  90.             // 设置点击区域，这里设置的是根据 fill 模式点击
  91.             .style( 'pointer-events', 'fill' )
  92.             // 设置鼠标样式
  93.             .style( 'cursor', 'move' )
  94.             ;
  96.         // 注册监听鼠标移动事件的 svg 元素
  97.         // ToolType.Center 是自定义的参数，会在移动回调中按照参数的形式传递到移动回调中，方便区别当前回调是哪一个 svg 元素产生的回调。
  98.         // {cursor: 'move'} 指定移动时的鼠标类型
  99.         this.registerMoveSvg( dragArea, ToolType.Center, {cursor: 'move'} );
  101.         // 创建边缘拖拽区域，用于操作 radius 属性
  102.         let circle = this._tool.circle()
  103.             // 设置stroke 样式
  104.             .stroke( { color: '#7fc97a', width: 2 } )
  105.             // 设置点击区域，这里设置的是根据 stroke 模式点击
  106.             .style( 'pointer-events', 'stroke' )
  107.             // 设置鼠标样式
  108.             .style( 'cursor', 'pointer' )
  110.         this.registerMoveSvg( circle, ToolType.Side, {cursor: 'pointer'} );
  112.         // 为 tool 定义一个绘画函数，方便在 onUpdate 中更新 svg 的绘制。
  113.         this._tool.plot = (radius, position) => {
  114.             this._tool.move(position.x, position.y);
  115.             dragArea.radius(radius);
  116.             circle.radius(radius);
  117.         };
  118.     }
  120.     onUpdate () {
  121.         // 更新 svg 工具
  123.         // 获取 gizmo 依附的组件
  124.         let target = this.target;
  126.         // 获取 gizmo 依附的节点
  127.         let node = this.node;
  129.         // 获取节点世界坐标
  130.         let position = node.convertToWorldSpaceAR(target.offset);
  132.         // 转换世界坐标到 svg view 上
  133.         // svg view 的坐标体系和节点坐标体系不太一样，这里使用内置函数来转换坐标
  134.         position = this.worldToPixel(position);
  136.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  137.         position = Editor.GizmosUtils.snapPixelWihVec2( position );
  139.         // 获取世界坐标下圆半径
  140.         let p1 = node.convertToWorldSpaceAR(cc.p(target.radius, 0));
  141.         let p2 = node.convertToWorldSpaceAR(cc.p(0, 0));
  142.         let radius = p1.sub(p2).mag();
  144.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  145.         radius = Editor.GizmosUtils.snapPixel(radius);
  147.         // 移动 svg 工具到坐标
  148.         this._tool.plot(radius, position);
  149.     }
  150. }
  152. module.exports = CustomGizmo;

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