superGizmo 类型

继承于 Editor.Gizmo

超级gizmo

索引

父类的属性

Editor.Gizmo.prototype.node

Get node of the gizmo.

Editor.Gizmo.prototype.nodes

Get current nodes of the gizmo.

Editor.Gizmo.prototype.topNodes

Get current top nodes of the gizmo.

Editor.Gizmo.prototype.selecting

Whether the gizmo is selecting.

Editor.Gizmo.prototype.editing

Whether the gizmo is editing.

Editor.Gizmo.prototype.hovering

Whether the gizmo is hovering.

属性（properties）

• circles Svg.Circle[][]

• lines Svg.Line[][]

• paths Svg.Path[][]

• rects Svg.Rect[][]

• touchCircles Svg.Circle[][]

• touchLines Svg.Line[][]

• touchPaths Svg.Path[][]

• touchRects Svg.Rect[][]

• groups Svg.G[]

• defaultStartColor String

• defaultEndColor String

• defaultCircleFillColor String

• defaultCircleStrokeColor String

• defaultLineStrokeColor String

• defaultPathFillColor String

• defaultPathStrokeColor String

• defaultRectFillColor String

• defaultRectStrokeColor String

• defaultTouchFillColor String

• defaultTouchStrokeColor String

• defaultStrokeWidth Number

• defaultLineDashArray String

• defaultCircleDashArray String

• defaultPathDashArray String

• defaultRectDashArray String

• defaultTouchStrokeWidth Number

• defaultCircleRadius Number

• defaultRectWidth Number

• defaultRectHeight Number

• defaultTouchCircleRadius Number

• defaultTouchRectWidth Number

• defaultTouchRectHeight Number

父类的方法

Methods

Editor.Gizmo.prototype.registerMoveSvg(svg, args, opts)

Register a moveable svg element. When the svg element is moved, the callback created from onCreateMoveCallbacks will be called.

• svg Svg Element - The svg element which can move.

• args Object | Array - The args will parse to callback, you can check which svg element is moved with the args.

• opts
  

Object - The options you can set.

• cursor String - The move mouse cursor.
• ignoreWhenHoverOther Boolean - Will ignore the mouse down event on this svg element if hover on other svg element.

this.registerMoveSvg(moveRectSvg, 'move-rect');
this.registerMoveSvg(moveAnchorSvg, 'move-anchor-rect');

Editor.Gizmo.prototype.recordChanges()

Record undo changes, generally gizmo will record changes automatically.

Editor.Gizmo.prototype.commitChanges()

Commit undo changes, generally gizmo will commit changes automatically

Editor.Gizmo.prototype.adjustValue(targets, keys, minDifference)

Adjust value to avoid value's fractional part to be too long.

• targets [Object] - The target wich should adjust.
• keys String (optional) - If not specified, then will adjust all available properties on target.
• minDifference Number(optionnal) - The decimal precision, default is Editor.Gizmo.prototype.defaultMinDifference()

this.adjustValue(this.node, ['position']);

Editor.Gizmo.prototype.worldToPixel(position)

Convert cocos2d world position to svg position.

Editor.Gizmo.prototype.pixelToWorld(position)

Convert svg position to cocos2d world position.

Editor.Gizmo.prototype.sceneToPixel(position)

Convert cocos2d scene position to svg position.

Editor.Gizmo.prototype.pixelToScene(position)

Convert svg position to cocos2d scene position.

Inherit Methods

Editor.Gizmo.prototype.init()

Call when init a gizmo, you can reimplement this function to do your self init.

Default implement:

init () {
    // init logic
}

Editor.Gizmo.prototype.layer()

There three layer types now: background, scene, foreground, generally we add gizmo to scene layer.

Default implement:

layer () {
    return 'scene';
}

Editor.Gizmo.prototype.visible()

Whether the gizmo is visible, if you want the gizmo always be visible, then return true.

Default implement:

visible () {
    return this.selecting || this.editing;
}

Editor.Gizmo.prototype.dirty()

Whether the gizmo is dirty, the gizmo will only update when gizmo is dirty. If you want to update gizmo every frame then return true.

Default implement:

dirty () {
    return this._viewDirty() || this._nodeDirty() || this._dirty;
}

Editor.Gizmo.prototype.onCreateRoot()

This function will call when create the root svg element for a gizmo. You can implement this function to custom your gizmo creation.

onCreateRoot () {
    // your implement
    var tool = this._root.group();
}

Editor.Gizmo.prototype.onCreateMoveCallbacks()

This callback return from the function will call when the moveable svg element is moved.

The callback should include methods with:

• start(x, y, event, ...args) - Called when mouse press on the svg
  • x Number - Press x position
  • y Number - Press y position
  • event MouseEvent - The mouse event
  • args - The arguments parsed from registerMoveSvg
• update(dx, dy, event, ...args) - Called when mouse move on the svg
  • dx Number - Horizontal move distance from current mouse position to start mouse position
  • dy Number - Vertical move distance from current mouse position to start mouse position
  • event MouseEvent - The mouse event
  • args - The arguments parsed from registerMoveSvg
• end(updated, event, ...args) - Called when mouse release on the svg
  • updated Boolean - Whether the mouse moved
  • event MouseEvent - The mouse event
  • args - The arguments parsed from registerMoveSvg

onCreateMoveCallbacks () {
    return {
        start: (x, y, event, ...args) => {

        },
        update: (dx, dy, event, ...args) => {

        },
        end: (updated, event, ...args) => {

        }
    };
}

Editor.Gizmo.prototype.defaultMinDifference()

Used for Editor.Gizmo.prototype.adjustValue.

The default min difference will be:

defaultMinDifference() {
    return Editor.Math.numOfDecimalsF(1.0/this._view.scale);
}

方法

• convertToNodePostion 将svg坐标系下的点转化到节点坐标
• getBezierPathData 获取路径渲染贝塞尔所需要的数据
• getClosePathData 获取路径渲染封闭多边形所需要的数据
• getFittedNumber 获取适配视图的数字
• getFittedStrokeData 获取适配视图的StrokeData
• getFittedPosition 获取适配视图的点
• getFittedPositionArray 获取适配视图的点的数组
• getGroup 获取Svg根节点下的group
• getCircle 获取圆形
• getTouchCircle 获取触控的圆形
• getLine 获取线段
• getTouchLine 获取触控的线段
• getPath 获取路径
• getTouchPath 获取触控的路径
• getRect 获取矩形
• getTouchRect 获取触控的矩形
• abstract onLineTouchBegan 线段点击开始回调
• abstract onLineTouchMoved 线段拖拽回调
• abstract onLineTouchEnd 线段点击结束回调
• abstract onCircleTouchBegan 圆形点击开始回调
• abstract onCircleTouchMoved 圆形拖拽回调
• abstract onCircleTouchEnd 圆形点击结束回调
• abstract onRectTouchBegan 矩形点击开始回调
• abstract onRectTouchMoved 矩形拖拽回调
• abstract onRectTouchEnd 矩形点击结束回调
• abstract onPathTouchBegan路径点击开始回调
• abstract onPathTouchMoved路径拖拽回调
• abstract onPathTouchEnd路径点击结束回调
• clear 清除
• draw 绘制
• render 渲染
• init 初始化
• resetData 根据配置文件重新设置样式
• onCreateMoveCallbacks 创建 gizmo 操作回调
• onCreateRoot 创造SVG根节点的回调
• onUpdate 更新的回调

Details

方法

convertToNodePostion

将svg坐标系下的点转化到目标节点的节点坐标系。

参数列表

• point {x?: number;y?: number;}

示例

//不推荐用这个
//建议开发者用getFittedPosition
var point = this.convertToNodePostion(cc.v2(2,3));
var point2= this.convertToNodePostion({x:2,y:1})

getBezierPathData

获取路径渲染贝塞尔所需要的数据。

参数列表

• ...pointArray [number, number][]

示例

draw(){
    let path = this.getPath()
    let pointArray=this.getFittedPositionArray([0, 0],[20, 10], [200, -22], [100, 0])
    path.plot(this.getBezierPathData(...pointArray))
}

getClosePathData

获取路径渲染封闭多边形所需要的数据。

参数列表

• ...pointArray [number, number][]

示例

draw(){
    let path = this.getPath()
    let pointArray=this.getFittedPositionArray([0, 0], [20, 10], [200, -22], [100, 0])
    path.plot(this.getClosePathData(...pointArray))
}

getFittedNumber

获取适配视图的数字。

参数列表

• number Number

示例

draw(){
    let rect = this.getRect()
    rect.width(this.getFittedNumber(20))
}

getFittedStrokeData

获取适配视图的StrokeData。

参数列表

• strokeData

  {

  ​ width?: number;

  ​ color?: string;

  ​ opacity?: number;

  ​ linecap?: string;

  ​ linejoin?: string;

  ​ miterlimit?: number;

  ​ dasharray?: string;

  ​ dashoffset?: number;

  }

示例

draw(){
    let rect = this.getRect()
    rect.stroke(this.getFittedStrokeData({ color: this.defaultRectStrokeColor, width: this.defaultStrokeWidth, dasharray: this.defaultRectDashArray }))
}

getFittedPosition

获取适配视图的点。

参数列表

• pointAlias {x?:number; y?:number} | [number,number]

示例

draw(){
    let pos = this.getFittedPosition([20, 20]);
    this.getCircle()
        .center(pos.x, pos.y)
        .radius(10 * this._view.scale);
}

getFittedPositionArray

获取适配视图的点的数组。

参数列表

• ...pointAlias {x?:number; y?:number}[] | [number,number][]

示例

draw(){
    let path = this.getPath()
    let pointArray=this.getFittedPositionArray([0, 0],[20, 10], [200, -22], [100, 0])
    path.plot(this.getBezierPathData(...pointArray))
}

getGroup

获取Svg根节点下第index个group。

参数列表

• index? Number 根节点的第几个group

示例

//不推荐这么做
this.getGroup(1).circle()
    .center(0,0)

getCircle

获取Svg根节点下指定的group的圆形,仅显示用。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const points=[cc.v2(),cc.v2(),cc.v2()]
    points.forEach((p,index)=>{
        const p = this.getFittedPosition(p)
         this.getCircle(index)
          .center(p.x, p.y)
    })
}

getTouchCircle

获取Svg根节点下指定的group已经注册了点击事件的圆形,用于交互。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const points=[cc.v2(),cc.v2(),cc.v2()]
    points.forEach((p,index)=>{
        const p = this.getFittedPosition(p)
         this.getTouchCircle(index)
          .center(p.x, p.y)
    })
}

getLine

获取Svg根节点下指定的group的线段,仅显示用。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const points=[cc.v2(),cc.v2(),cc.v2()]
    points.forEach((p,index,arr)=>{
        const p = this.getFittedPosition(p)
        if(index!=arr.length-1)
        {
            const nextPoint=arr[index+1]
            this.getLine(index)
                  .plot([[p.x,p.y],[nextPoint.x,nextPoint.y]])   
        }

    })
}

getTouchLine

获取Svg根节点下指定的group已经注册了点击事件的线段,用于交互。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const points=[cc.v2(),cc.v2(),cc.v2()]
    points.forEach((p,index,arr)=>{
        const p = this.getFittedPosition(p)
        if(index!=arr.length-1)
        {
            const nextPoint=arr[index+1]
            this.getTouchLine(index)
                  .plot([[p.x,p.y],[nextPoint.x,nextPoint.y]])   
        }

    })
}

getPath

获取Svg根节点下指定的group的路径,仅显示用。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    let path = this.getPath()
    let pointArray=this.getFittedPositionArray([0, 0], [20, 10], [200, -22], [100, 0])
    path.plot(this.getClosePathData(...pointArray))
}

getTouchPath

获取Svg根节点下指定的group已经注册了点击事件的路径,用于交互。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    let path = this.getTouchPath()
    let pointArray=this.getFittedPositionArray([0, 0], [20, 10], [200, -22], [100, 0])
    path.plot(this.getClosePathData(...pointArray))
}

getRect

获取Svg根节点下指定的group的矩形,仅显示用。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const width=this.getFittedNumber(100)
    const rect=this.getRect().size(width,width)
}

getTouchRect

获取Svg根节点下指定的group已经注册了点击事件的矩形,用于交互。

参数列表

• drawIndex? Number 绘制的第几个

• groupIndex? Number 根节点下第几个Group

示例

draw()
{
    const width=this.getFittedNumber(100)
    const rect=this.getRect().size(width,width)
    const touchRect=this.getTouchRect().size(width,width)
}

abstract onLineTouchBegan

线段点击开始回调。

参数列表

• point cc.Vec2 目标节点的节点坐标系上点击的点

• event MouseEvent 事件

• drawIndex Number group下的第几个TouchLine

• groupIndex Number 属于根节点下的第几个group

• line SVG.Line 线段

abstract onLineTouchMoved

线段拖拽的回调

参数列表

• touchStartPoint cc.Vec2 目标节点的节点坐标系上点击开始的点
• dx Number 水平方向偏移
• dy Number 竖直方向偏移
• event MouseEvent 事件
• drawIndexNumber group下的第几个TouchLine
• groupIndex Number 属于根节点下的第几个group
• line SVG.Line 线段

abstract onLineTouchEnd

线段点击结束的回调

参数列表

• event MouseEvent 事件
• drawIndexNumber group下的第几个TouchLine
• groupIndex Number 属于根节点下的第几个group
• line SVG.Line 线段

abstract onCircleTouchBegan

圆形点击开始回调。

参数列表

• point cc.Vec2 目标节点的节点坐标系上点击的点

• event MouseEvent 事件

• drawIndex Number group下的第几个TouchCircle

• groupIndex Number 属于根节点下的第几个group

• circle SVG.Circle 圆形

abstract onCircleTouchMoved

圆形拖拽的回调

参数列表

• touchStartPoint cc.Vec2 目标节点的节点坐标系上点击开始的点

• dx Number 水平方向偏移

• dy Number 竖直方向偏移

• event MouseEvent 事件

• drawIndexNumber group下的第几个TouchCircle

• groupIndex Number 属于根节点下的第几个group

• circle SVG.Circle 圆形

abstract onCircleTouchEnd

圆形点击结束的回调

参数列表

• event MouseEvent 事件
• drawIndexNumber group下的第几个TouchCircle
• groupIndex Number 属于根节点下的第几个group
• circle SVG.Circle 圆形

abstract onRectTouchBegan

矩形点击开始回调。

参数列表

• point cc.Vec2 目标节点的节点坐标系上点击的点

• event MouseEvent 事件

• drawIndex Number group下的第几个TouchRect

• groupIndex Number 属于根节点下的第几个group

• rect SVG.Rect 矩形

abstract onRectTouchMoved

矩形拖拽的回调

参数列表

• touchStartPoint cc.Vec2 目标节点的节点坐标系上点击开始的点

• dx Number 水平方向偏移

• dy Number 竖直方向偏移

• event MouseEvent 事件

• drawIndexNumber group下的第几个TouchRect

• groupIndex Number 属于根节点下的第几个group

• rect SVG.Rect 矩形

abstract onRectTouchEnd

矩形点击结束的回调

参数列表

• event MouseEvent 事件

• drawIndexNumber group下的第几个TouchRect

• groupIndex Number 属于根节点下的第几个group

• rect SVG.Rect 矩形

abstract onPathTouchBegan

路径点击开始回调。

参数列表

• point cc.Vec2 目标节点的节点坐标系上点击的点

• event MouseEvent 事件

• drawIndex Number group下的第几个TouchPath

• groupIndex Number 属于根节点下的第几个group

• path SVG.Path 路径

abstract onPathTouchMoved

路径拖拽的回调

参数列表

• touchStartPoint cc.Vec2 目标节点的节点坐标系上点击开始的点

• dx Number 水平方向偏移

• dy Number 竖直方向偏移

• event MouseEvent 事件

• drawIndexNumber group下的第几个TouchPath

• groupIndex Number 属于根节点下的第几个group

• path SVG.Path 路径

abstract onPathTouchEnd

路径点击结束的回调

参数列表

• event MouseEvent 事件

• drawIndexNumber group下的第几个TouchPath

• groupIndex Number 属于根节点下的第几个group

• path SVG.Path 路径

clear

清除所有的渲染

draw

开发者绘制的入口

render

渲染

resetData

读取配置文件并解析后赋值给当前gizmo

onCreateMoveCallbacks

创建 gizmo 操作回调

onCreateRoot

创建 svg 根节点的回调

onUpdate

gizmo更新