自定义 Gizmo 进阶

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

1、在 资源管理器的 CustomComponent 脚本中定义 offset：

  1. properties: {
  2.     //...
  3.     offset: cc.Vec2
  4. },

2、将 custom-gizmo.js 改为以下内容并保存：

  1. let ToolType = {
  2.     None: 0,
  3.     Side: 1,
  4.     Center: 2
  5. };
  7. class CustomGizmo extends Editor.Gizmo {
  8.     init () {
  9.         // 初始化一些参数
  10.     }
  12.     onCreateMoveCallbacks () {
  13.         // 创建 gizmo 操作回调
  15.         // 申明一些局部变量
  16.         let startOffset;        // 按下鼠标时记录的圆偏移量
  17.         let startRadius;        // 按下鼠标时记录的圆半径
  18.         let pressx, pressy;     // 按下鼠标时记录的鼠标位置
  20.         return {
  21.             /**
  22.              * 在 gizmo 上按下鼠标时触发
  23.              * @param x 按下点的 x 坐标
  24.              * @param y 按下点的 y 坐标
  25.              * @param event mousedown dom event
  26.              */
  27.             start: (x, y, event) => {
  28.                 startRadius = this.target.radius;
  29.                 startOffset = this.target.offset;
  30.                 pressx = x;
  31.                 pressy = y;
  32.             },
  34.             /**
  35.              * 在 gizmo 上按下鼠标移动时触发
  36.              * @param dx 鼠标移动的 x 位移
  37.              * @param dy 鼠标移动的 y 位移
  38.              * @param event mousedown dom event
  39.              */
  40.             update: (dx, dy, event, type) => {
  41.                 // 获取 gizmo 依附的节点
  42.                 let node = this.node;
  44.                 // 获取 gizmo 依附的组件
  45.                 let target = this.target;
  47.                 if (type === ToolType.Center) {
  48.                     // 计算新的偏移量
  49.                     let mat4 = cc.vmath.mat4.create();
  50.                     node.getWorldMatrix(mat4);
  51.                     let t = cc.vmath.mat4.invert(mat4, mat4);
  52.                     t.m12 = t.m13 = 0;
  54.                     let d = cc.v2(dx, dy);
  55.                     cc.vmath.vec2.transformMat4(d, d, t);
  56.                     d.addSelf(startOffset);
  57.                     target.offset = d;
  58.                     this.adjustValue(target, 'offset');
  59.                 }
  60.                 else {
  61.                     // 转换坐标点到节点下
  62.                     let position = node.convertToNodeSpaceAR(cc.v2(pressx + dx, pressy + dy));
  63.                     // 计算 radius
  64.                     target.radius = position.sub(startOffset).mag();
  65.                     // 防止 radius 小数点位数过多
  66.                     this.adjustValue(target, 'radius');
  67.                 }
  68.             },
  70.             /**
  71.              * 在 gizmo 抬起鼠标时触发
  72.              * @param event mousedown dom event
  73.              */
  74.             end: (updated, event) => {
  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.         // 创建中心拖拽区域，用于操作 offset 属性
  90.         let dragArea = this._tool.circle()
  91.             // 设置 fill 样式
  92.             .fill( { color: 'rgba(0,128,255,0.2)' } )
  93.             // 设置点击区域，这里设置的是根据 fill 模式点击
  94.             .style( 'pointer-events', 'fill' )
  95.             // 设置鼠标样式
  96.             .style( 'cursor', 'move' )
  97.             ;
  99.         // 注册监听鼠标移动事件的 svg 元素
  100.         // ToolType.Center 是自定义的参数，会在移动回调中按照参数的形式传递到移动回调中，方便区别当前回调是哪一个 svg 元素产生的回调。
  101.         // {cursor: 'move'} 指定移动时的鼠标类型
  102.         this.registerMoveSvg( dragArea, ToolType.Center, {cursor: 'move'} );
  104.         // 创建边缘拖拽区域，用于操作 radius 属性
  105.         let circle = this._tool.circle()
  106.             // 设置stroke 样式
  107.             .stroke( { color: '#7fc97a', width: 2 } )
  108.             // 设置点击区域，这里设置的是根据 stroke 模式点击
  109.             .style( 'pointer-events', 'stroke' )
  110.             // 设置鼠标样式
  111.             .style( 'cursor', 'pointer' )
  113.         this.registerMoveSvg( circle, ToolType.Side, {cursor: 'pointer'} );
  115.         // 为 tool 定义一个绘画函数，方便在 onUpdate 中更新 svg 的绘制。
  116.         this._tool.plot = (radius, position) => {
  117.             this._tool.move(position.x, position.y);
  118.             dragArea.radius(radius);
  119.             circle.radius(radius);
  120.         };
  121.     }
  123.     onUpdate () {
  124.         // 更新 svg 工具
  126.         // 获取 gizmo 依附的组件
  127.         let target = this.target;
  129.         // 获取 gizmo 依附的节点
  130.         let node = this.node;
  132.         // 获取节点世界坐标
  133.         let position = node.convertToWorldSpaceAR(target.offset);
  135.         // 转换世界坐标到 svg view 上
  136.         // svg view 的坐标体系和节点坐标体系不太一样，这里使用内置函数来转换坐标
  137.         position = this.worldToPixel(position);
  139.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  140.         position = Editor.GizmosUtils.snapPixelWihVec2( position );
  142.         // 获取世界坐标下圆半径
  143.         let p1 = node.convertToWorldSpaceAR(cc.v2(target.radius, 0));
  144.         let p2 = node.convertToWorldSpaceAR(cc.v2(0, 0));
  145.         let radius = p1.sub(p2).mag();
  147.         // 对齐坐标，防止 svg 因为精度问题产生抖动
  148.         radius = Editor.GizmosUtils.snapPixel(radius);
  150.         // 移动 svg 工具到坐标
  151.         this._tool.plot(radius, position);
  152.     }
  153. }
  155. module.exports = CustomGizmo;

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