• 自定义 Gizmo 进阶

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