• 自定义 Gizmo 进阶

    自定义 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 实例