Transform

阅读时间约 11 分钟

配置

transforming

平移、缩放和旋转节点的基础选项。

const graph = new Graph({
  transforming: {
    clearAll: true,
    clearOnBlankMouseDown: true,
  }
})

支持的选项如下:

export interface Options {
  clearAll?: boolean
  clearOnBlankMouseDown?: boolean
}

clearAll

创建新组件的时候是否清除页面上存在的其他组件,默认为 true

clearOnBlankMouseDown

点击空白区域的时候是否清除组件,默认为 true

resizing

缩放节点,默认禁用。开启后可以对节点进行缩放。

const graph = new Graph({
  resizing: true,
})

// 等同于
const graph = new Graph({
  resizing: {
    enabled: true,
    minWidth: 0,
    minHeight: 0,
    maxWidth: Number.MAX_SAFE_INTEGER,
    maxHeight: Number.MAX_SAFE_INTEGER,
    orthogonal: true,
    restricted: false,
    autoScroll: true,
    preserveAspectRatio: false,
    allowReverse: true,
  },
})

每一个配置都支持函数,比如 enabled:

 new graph({ 
   resizing: { 
     enabled:  (this: Graph, arg: Node<Node.Properties>) => boolean 
    }
  })

enabled

是否开启节点缩放,默认为 false

minWidth

缩放后的最小宽度。

maxWidth

缩放后的最大宽度。

minHeight

缩放后的最小高度。

maxHeight

缩放后的最大高度。

orthogonal

是否显示中间缩放点,默认为 true

restricted

是否限制缩放大小为画布边缘,默认为 false

autoScroll

是否自动滚动画布,仅当开启 Srcoller 并且 restrictedfalse 时有效,默认为 true

preserveAspectRatio

缩放过程中是否保持节点的宽高比例,默认为 false

allowReverse

到达最小宽度或者高度时是否允许控制点反向拖动,默认为 true

rotating

旋转节点,默认禁用。开启后可以对节点进行旋转。

const graph = new Graph({
  rotating: true,
})

// 等同于
const graph = new Graph({
  rotating: {
    enabled: true,
    grid: 15,
  },
})

支持的选项如下:

export interface RotatingRaw {
  enabled?: boolean
  grid?: number
}

enabled

是否开启节点旋转,默认值为 false

grid

每次旋转的角度,默认值为 15

translating

配置节点的可移动区域,默认值为 false

const graph = new Graph({
  translating: {
    restrict: true,
  }
})

restrict 支持以下几种类型:

  • boolean 设置为 true,节点移动时无法超过画布区域。
  • number 将节点限制在画布区域扩展(正数)或收缩(负数)后的范围,通常设置为负数将节点限制在离画布边缘指定大小的区域内,如设置为 -20 表示将节点限制在距离画布边缘 20px 的区域内。
  • Rectangle.RectangleLike | (arg: CellView) => Rectangle.RectangleLike 指定节点的移动区域。

scaling

min

画布可以缩放的最小级别。默认值为 0.01

max

画布可以缩放的最大级别。默认值为 16

方法

matrix()

matrix(): DOMMatrix

获取画布的变换矩阵。

matrix(mat: DOMMatrix | Dom.MatrixLike | null): this

参数

名称类型必选默认值描述
matDOMMatrix | Dom.MatrixLike | null变换矩阵,参考 DomMatrix

resize(...)

resize(width?: number, height?: number): this

设置容器大小,自动根据是否开启 Scroller 来设置画布或设置 Scroller 的大小。如果需要根据浏览器窗口大小动态调整画布大小,请使用此方法。

参数

名称类型必选默认值描述
widthnumber画布宽度,缺省时宽度保持不变。
heightnumber画布高度,缺省时高度保持不变。

resizeGraph(...)

resizeGraph(width?: number, height?: number): this

设置画布大小。

参数

名称类型必选默认值描述
widthnumber画布宽度,缺省时宽度保持不变。
heightnumber画布高度,缺省时高度保持不变。

resizeScroller(...)

resizeScroller(width?: number, height?: number): this

设置 Scroller 大小,仅在启用 Scroller 后生效。

参数

名称类型必选默认值描述
widthnumber画布宽度,缺省时宽度保持不变。
heightnumber画布高度,缺省时高度保持不变。

scale(...) Deprecated

scale(): {
  sx: number
  sy: number
}

获取画布的缩放比例。

scale(sx: number, sy?: number, cx?: number, cy?: number): this

设置画布的缩放比例。

参数

名称类型必选默认值描述
sxnumberX 轴方向缩放比例。
synumbersxY 轴方向缩放比例,缺省时使用 sx
cxnumber0缩放中心 x 坐标。
cynumber0缩放中心 y 坐标。

zoom(...)

zoom(): number

获取画布缩放比例。

zoom(factor: number, options?: ZoomOptions): this

缩放画布。

参数

名称类型必选默认值描述
factornumber缩放比例。
options.absolutebooleanfalse是否为绝对缩放,
options.minScalenumber-最小缩放比例。
options.maxScalenumber-最大缩放比例。
options.scaleGridnumber-修正缩放比例为 scaleGrid 的整倍数。
options.centerPoint.PointLike-缩放中心。

options.absolutetrue 时,表示将画布缩放到 factor 代表的值,否则 factor 表示放大/缩小的因子,当 factor 为正数时表示画布放大画布,当 factor 为负数时表示缩小画布。

zoomTo(...)

zoomTo(factor: number, options?: ZoomOptions): this

缩放画布到指定的比例。

参数

名称类型必选默认值描述
factornumber缩放比例。
options.minScalenumber-最小缩放比例。
options.maxScalenumber-最大缩放比例。
options.scaleGridnumber-修正缩放比例为 scaleGrid 的整倍数。
options.centerPoint.PointLike-缩放中心。

zoomToRect(...)

zoomToRect(rect: Rectangle.RectangleLike, options?: Options): this

缩放和平移画布,使 rect 表示的矩形区域(相对于画布坐标)充满视口。

参数

名称类型必选默认值描述
rectRectangle.RectangleLike矩形区域。
options.paddingnumber | { left: number, top: number, right: number, bottom: number }-边距。
options.contentAreaRectangle.RectangleLike-内容区域,默认获取画布内容区域。
options.viewportAreaRectangle.RectangleLike-视口区域,默认获取画布视口。
options.scaleGridnumber-修正缩放比例为 scaleGrid 的整倍数。
options.minScalenumber-最小缩放比例。
options.maxScalenumber-最大缩放比例。
options.minScaleXnumber-X 轴方向的最小缩放比例。
options.maxScaleXnumber-X 轴方向的最大缩放比例。
options.minScaleYnumber-Y 轴方向的最小缩放比例。
options.maxScaleYnumber-Y 轴方向的最大缩放比例。
options.preserveAspectRatiobooleanfalse是否保持长宽比。
options.useCellGeometrybooleanfalse是否使用节点/边的几何信息(Model)计算包围盒,默认使用浏览器 API 获取每个节点和边(View)的包围盒。

zoomToFit(...)

zoomToFit(options?: Options): this

缩放画布内容,使画布内容充满视口。其中 options 选项与 zoomToRect(...) 方法的选项一致。

rotate(...)

rotate(): {
  angle: number
  cx?: number
  cy?: number
}

获取画布的旋转角度和旋转中心。

rotate(angle: number, cx?: number, cy?: number): this

旋转画布。

参数

名称类型必选默认值描述
anglenumber旋转角度。
cxnumber-旋转中心 x 坐标,默认使用画布中心。
cynumber-旋转中心 y 坐标,默认使用画布中心。

translate(...)

translate(): {
  tx: number
  ty: number
}

获取画布的平移量。

translate(tx: number, ty: number): this

平移画布。

参数

名称类型必选默认值描述
txnumberX 轴平移量。
tynumberY 轴平移量。

fitToContent(...)

fitToContent(
  gridWidth?: number,
  gridHeight?: number,
  padding?: NumberExt.SideOptions,
  options?: Transform.FitToContentOptions,
): Rectangle
fitToContent(options?: Transform.FitToContentFullOptions): Rectangle

通过平移和重置画布大小,使其适应画布内容,返回画布的矩形区域。

参数

名称类型必选默认值描述
options.gridWidthnumber-使宽度是 gridWidth 的整倍数。
options.gridHeightnumber-使高度是 gridHeight 的整倍数。
options.minWidthnumber-画布最小宽度。
options.minHeightnumber-画布最小高度。
options.maxWidthnumber-画布最大宽度。
options.maxHeightnumber-画布最大高度。
options.paddingnumber | Padding0边距。
options.contentAreaRectangle.RectangleLike-内容区域,默认获取画布内容区域。
options.useCellGeometrybooleanfalse是否使用节点/边的几何信息(Model)计算包围盒,默认使用浏览器 API 获取每个节点和边(View)的包围盒。
options.allowNewOrigin'negative' | 'positive' | 'any'-画布左上角位置选项。

scaleContentToFit(...)

scaleContentToFit(options?: Transform.ScaleContentToFitOptions): this

缩放画布,使内容充满画布视口。

参数

名称类型必选默认值描述
options.paddingnumber-边距。
options.contentAreaRectangle.RectangleLike-内容区域,默认获取画布内容区域。
options.viewportAreaRectangle.RectangleLike-视口区域,默认获取画布视口。
options.scaleGridnumber-修正缩放比例为 scaleGrid 的整倍数。
options.minScalenumber-最小缩放比例。
options.maxScalenumber-最大缩放比例。
options.minScaleXnumber-X 轴方向的最小缩放比例。
options.maxScaleXnumber-X 轴方向的最大缩放比例。
options.minScaleYnumber-Y 轴方向的最小缩放比例。
options.maxScaleYnumber-Y 轴方向的最大缩放比例。
options.preserveAspectRatiobooleantrue是否保持长宽比。
options.useCellGeometrybooleanfalse是否使用节点/边的几何信息(Model)计算包围盒,默认使用浏览器 API 获取每个节点和边(View)的包围盒。

getContentArea(...)

getContentArea(options?: Transform.GetContentAreaOptions): Rectangle

获取画布内容的矩形区域,使用画布本地坐标表示。

参数

名称类型必选默认值描述
options.useCellGeometrybooleanfalse是否使用节点/边的几何信息(Model)来计算画布内容大小,默认使用浏览器 API 获取每个节点和边(View)的包围盒。

getContentBBox(...)

getContentBBox(options?: Transform.GetContentAreaOptions): Rectangle

获取画布内容的矩形区域,使用画布坐标表示。

参数

名称类型必选默认值描述
options.useCellGeometrybooleanfalse是否使用节点/边的几何信息(Model)来计算画布内容大小,默认使用浏览器 API 获取每个节点和边(View)的包围盒。

center(...)

center(options?: CenterOptions): this

将画布中心与视口中心对齐。在 scroller 画布中如果不能通过滚动来对齐,则自动为 Scroller 的容器增加一定的 padding 边距来强制对齐。

参数

名称类型必选默认值描述
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效

centerPoint(...)

centerPoint(x?: number | null, y?: number | null, options?: CenterOptions): this

xy 指定的点(相对于画布)与视口中心对齐。在 scroller 画布中如果不能通过滚动来对齐,则自动为 Scroller 的容器增加一定的 padding 边距来强制对齐。

参数

名称类型必选默认值描述
xnumber-相对一画布的 x 轴坐标。
ynumber-相对一画布的 y 轴坐标。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效

例如

graph.centerPoint(100, 200)
graph.centerPoint(100, null, { padding: { left: 100 }})
graph.centerPoint(null, 200, { padding: { left: 100 }})

centerContent(...)

centerContent(options?: PositionContentOptions): this

将画布内容中心与视口中心对齐。如果不能通过滚动来对齐,则自动为 Scroller 的容器增加一定的 padding 边距来强制对齐。

参数

名称类型必选默认值描述
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效
options.useCellGeometrybooleanfalse是否通过节点/边的几何信息(Model)计算内容区域,默认使用浏览器 API 获取每个节点和边(View)的包围盒。

例如

graph.centerContent()
graph.centerContent({ padding: { left: 100 }})

centerCell(...)

centerCell(options?: CenterOptions): this

将节点/边的中心与视口中心对齐。在 scroller 画布中如果不能通过滚动来对齐,则自动为 Scroller 的容器增加一定的 padding 边距来强制对齐。

参数

名称类型必选默认值描述
cellCell节点/边。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效

例如

graph.centerCell(cell)
graph.centerCell(cell, { padding: { left: 100 }})

positionContent(...)

positionContent(pos: Position, options?: PositionContentOptions): this

pos 代表的画布内容 BBox 位置与对应的画布视口位置对齐。如 pos'bottom-left' 时,表示将画布内容的左下角与视口的左下角对齐。

参数

名称类型必选默认值描述
posPosition对齐位置。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效
options.useCellGeometrybooleanfalse是否通过节点/边的几何信息(Model)计算内容区域,默认使用浏览器 API 获取每个节点和边(View)的包围盒。。

支持的对齐位置有:

type Position =     
    | 'center'
    | 'top'
    | 'top-right'
    | 'top-left'
    | 'right'
    | 'bottom-right'
    | 'bottom'
    | 'bottom-left'
    | 'left'

positionCell(...)

positionCell(cell: Cell, pos: Direction, options?: CenterOptions): this

pos 代表的节点/边 BBox 位置与对应的画布视口位置对齐。如 pos'bottom-left' 时,表示将节点/边的左下角与视口的左下角对齐。

参数

名称类型必选默认值描述
cellCell节点/边。
posPosition对齐位置。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效
type Position =     
    | 'center'
    | 'top'
    | 'top-right'
    | 'top-left'
    | 'right'
    | 'bottom-right'
    | 'bottom'
    | 'bottom-left'
    | 'left'

positionRect(...)

positionRect(rect: Rectangle.RectangleLike, pos: Direction, options?: CenterOptions): this

pos 代表的矩形位置与对应的画布视口位置对齐。如 pos'bottom-left' 时,表示将矩形的左下角与视口的左下角对齐。

参数

名称类型必选默认值描述
rectRectangle.RectangleLike矩形区域。
posPosition对齐位置。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效
type Position =     
    | 'center'
    | 'top'
    | 'top-right'
    | 'top-left'
    | 'right'
    | 'bottom-right'
    | 'bottom'
    | 'bottom-left'
    | 'left'

positionPoint(...)

positionPoint(point: Point.PointLike, x: number | string, y: number | string options?: CenterOptions): this

point 指定的点(相对于画布)与 xy 代表的画布视口位置对齐。

参数

名称类型必选默认值描述
pointPoint.PointLike被对齐的点。
xnumber | string视口 x 位置,支持百分比和负值。
ynumber | string视口 y 位置,支持百分比和负值。
options.paddingnumber | Padding-边距,在 scroller 画布中生效
options.animationobject-JQuery 动画选项,在 scroller 画布中生效

例如

// 将画布的左上角与视口中的点 [100, 50] 对齐
graph.positionPoint({ x: 0, y: 0 }, 100, 50)

// 将画布上的点 { x: 30, y: 80 } 与离视口左侧 25% 和离视口底部 40px 的位置对齐
graph.positionPoint({ x: 30, y: 80 }, '25%', -40)

// 将画布上的点 { x: 30, y: 80 } 与离视口右侧 25% 和离视口顶部 40px 的位置对齐
graph.positionPoint({ x: 30, y: 80 }, '-25%', 40)