• 自定义 Gizmo 进阶

    自定义 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;