自定义 Gizmo

目前 Gizmo 使用 svg.js 作为操作工具,具体 svg.js 的 API 可以参考 http://documentup.com/wout/svg.js

创建自定义 Gizmo

这里演示创建一个简单的跟着节点移动并缩放的圆

// 定义一个简单的 component,并命名为 CustomComponent
cc.Class({
    extends: cc.Component,

    properties: {
        radius: 100
    },
});
class CustomGizmo extends Editor.Gizmo {
    init () {
        // 初始化一些参数
    }

    onCreateRoot () {
        // 创建 svg 根节点的回调,可以在这里创建你的 svg 工具
        // this._root 可以获取到 Editor.Gizmo 创建的 svg 根节点

        // 实例:

        // 创建一个 svg 工具
        // group 函数文档 : http://documentup.com/wout/svg.js#groups
        this._tool = this._root.group();

        // 画一个的圆
        // circle 函数文档 : http://documentup.com/wout/svg.js#circle
        let circle = this._tool.circle();

        // 为 tool 定义一个绘画函数,可以为其他名字
        this._tool.plot = (radius, position) => {
            this._tool.move(position.x, position.y);
            circle.radius(radius);
        };
    }

    onUpdate () {
        // 在这个函数内更新 svg 工具

        // 获取 gizmo 依附的组件
        let target = this.target;

        // 获取 gizmo 依附的节点
        let node = this.node;

        // 获取组件半径
        let radius = target.radius;

        // 获取节点世界坐标
        let worldPosition = node.convertToWorldSpaceAR(cc.p(0, 0));

        // 转换世界坐标到 svg view 上
        // svg view 的坐标体系和节点坐标体系不太一样,这里使用内置函数来转换坐标
        let viewPosition = this.worldToPixel(worldPosition);

        // 对齐坐标,防止 svg 因为精度问题产生抖动
        let p = Editor.GizmosUtils.snapPixelWihVec2( viewPosition );

        // 获取世界坐标下圆半径
        let worldPosition2 = node.convertToWorldSpaceAR(cc.p(radius, 0));
        let worldRadius = worldPosition.sub(worldPosition2).mag();
        worldRadius = Editor.GizmosUtils.snapPixel(worldRadius);

        // 移动 svg 工具到坐标
        this._tool.plot(worldRadius, p);
    }

// 如果需要自定义 Gizmo 显示的时机,重写 visible 函数即可
//    visible () {
//        return this.selecting || this.editing;
//    }

// Gizmo 创建在哪个 Layer 中 : foreground, scene, background
// 默认创建在 scene Layer
//    layer () {
//        return 'scene';
//    }

// 如果 Gizmo 需要参加 点击测试,重写 rectHitTest 函数即可
//    rectHitTest (rect, testRectContains) {
//        return false;
//    }
}

module.exports = CustomGizmo;

注册自定义 Gizmo

在你的自定义 package 里的 package.json 中定义 gizmos 字段, 并注册上你的自定义 Gizmo

"gizmos": {
    "CustomComponent": "packages://custom-gizmo/custom-gizmo.js"
}
  • CustomComponent:Component 名字
  • packages://custom-gizmo/custom-gizmo.js:CustomGizmo 路径

这样就将 CustomGizmo 注册到 CustomComponent 上了,当添加一个 CustomComponent 到节点上并选择这个节点时,就可以看到这个 gizmo 了。

请阅读下一篇 自定义 Gizmo 进阶

更多 Gizmo Api 请参考 Gizmo Api

更多 Gizmo 实例请参考 Gizmo 实例

results matching ""

    No results matching ""