Transform

最新推荐文章于 2024-07-05 03:25:02 发布
最新推荐文章于 2024-07-05 03:25:02 发布
阅读量448 收藏 2
点赞数
分类专栏： X6 文章标签： javascript
原文链接：https://antv-x6.gitee.io/zh/docs/api/graph/transform
版权
本文详细介绍了图形库的配置选项，包括节点的平移、缩放和旋转，以及旋转和移动限制。支持的配置项如缩放比例、旋转角度、平移限制等，提供了丰富的交互功能，如节点缩放、旋转和移动。此外，还涵盖了画布的大小调整、缩放、旋转和平移方法，以及内容适配和对齐操作，为图形编辑和交互提供灵活控制。
摘要由CSDN通过智能技术生成

配置

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 并且 restricted 为 false 时有效，默认为 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

设置画布的缩放比例。

参数

名称类型必选默认值描述
sxnumber✓X 轴方向缩放比例。
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.absolute 为 true 时，表示将画布缩放到 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

平移画布。

参数

名称类型必选默认值描述
txnumber✓X 轴平移量。
tynumber✓Y 轴平移量。

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

将 x 和 y 指定的点（相对于画布）与视口中心对齐。在 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 指定的点（相对于画布）与 x 和 y 代表的画布视口位置对齐。

参数

名称类型必选默认值描述
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)
ywyanimate
关注
专栏目录
transform
03-22
在IT行业中，"transform"通常指的是数据转换或计算过程中的一个关键步骤，它涉及将原始数据转换为更适合分析、建模或可视化的形式。在这个场景中，标题"transform"可能是指一个特定的Python模块或者程序，它专注于...
antv X6 画布内容居中的坑
weixin_52950296的博客
07-05 3481
antv X6画布内容居中的坑
图形编辑器开发：缩放至适应画布
fe_watermelon的博客
06-23 846
大家好，我是前端西瓜哥。之前我们实现了画布缩放的功能，本文来讲讲如何让内容缩放至适应画布大小（Zoom to fit）。我们看看效果。
python 矩形旋转 transform
最新发布
weixin_31661121的博客
07-05 26
Python相关视频讲解：python的or运算赋值用法用python编程Excel有没有用处？011_编程到底好玩在哪？查看python文件_输出py文件_cat_运行python文件_shel如何实现Python矩形旋转transform 概述 在本文中，我将指导你如何使用Python实现矩形的旋转transfo...
JointJS 根据内容调整画布尺寸
路过君的博客
07-20 415
用法 paper.fitToContent({ padding: 20, // 内容周围留白大小 allowNewOrigin: 'any' // 注意此配置如果不填，padding的top和left属性不会生效 }) 源码 fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt) if (isObject$1(gridWidth)) {
g6学习笔记三(Graph）
vue6214的博客
02-23 4403
Graph 是 G6 图表的载体,有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
java rect 旋转_java实现图片任意角度旋转|chu
weixin_35278121的博客
02-24 231
本文实例为大家分享了Java实现图片旋转，供大家参考，具体内容如下方法一：普通方法实现图片旋转/** * 图像旋转 * @param src * @param angel * @return */ public static BufferedImage Rotate(Image src, double angel) { int src_width ...
java rect 旋转_用Java旋转矩形
weixin_34352633的博客
02-16 411
小编典典像Mihai一样旋转所有要测试的点，并使用Rectangle2D的contains(Point)方法。但是，如果您真的想旋转矩形，则可以这样操作(这是整数版本，但也可以使用Rectangle2D来实现它：)。public class TestRotate {public static void main(String... args) {Rectangle r = new Rectangl...
objectTransform
07-17
#objecttransform 可以更快地转换对象的实用程序库。 安装 $ npm install objecttransform --save 例子 var ts = require ( 'objecttransform' ) ; var result = ts . deep ( { 'servername' : 'pro.mac' , ...
ReviewFourier_fouriertransform_transform_
09-29
标题中的"ReviewFourier_fouriertransform_transform_"暗示了我们将深入探讨傅里叶变换及其在变换理论中的应用。 傅里叶变换的基本思想是将一个复杂的时域信号分解为一系列不同频率的正弦和余弦波的线性组合。这种...
transform.rar
03-10
在IT行业中，"transform"一词常常用于描述数据转换的过程，特别是在编程、数据分析以及前端开发等领域。"transform.rar"可能是一个包含"transform"插件的压缩包文件，这个插件可能用于执行各种类型的数据转换任务...
Unity3d实时Transform面板
10-07
"实时Transform面板"是Unity3D编辑器中的核心组件，它允许开发者直观地管理游戏对象的位置、旋转和缩放，是创建和调整场景中对象不可或缺的工具。在Unity中，Transform组件是每个游戏对象的基础，包含了对象在3D空间...
glide_transform
06-10
"glide_transform" 指的是Glide的一个扩展，涉及到图像处理和变换的功能。在这个话题中，我们将深入探讨Glide的叠加类（Transformations）以及如何使用它们来增强图片显示效果。 Glide的Transformations是用于...
Runtime Transform Gizmos
02-05
Runtime Transform Gizmos是一个脚本API，它可以让你在游戏中转换对象，能够在游戏中直观和专业的转换对象是非常有用的，特别是当你在运行时编辑器或游戏中，使用者可以移动、旋转和缩放对象。想要做一个模型工具吗...
jquery.transform
08-11
**jQuery.transform插件详解** jQuery.transform是一个非常实用的JavaScript库，专为网页动画设计，它扩展了jQuery的核心功能，使得开发者能够轻松实现复杂的CSS3变换效果。这个插件利用了现代浏览器对CSS3 ...
Runtime Transform Handles
04-26
在Unity引擎中，"Runtime Transform Handles"是一种高级的交互技术，允许用户在运行时通过直观的手柄来操纵场景中的对象，实现对物体的平移、缩放和旋转等操作。这种技术广泛应用于游戏开发、虚拟现实（VR）应用以及...
2021-09-26 旋转矩形RotateRect的角度和图片旋转
qq_41688035的博客
09-26 850
旋转矩形的angle确定方式：X轴逆时针旋转，遇到的第一个边的延长线认为是宽（和长度无关），angle是宽和X轴的夹角。范围是（-90，0] 如果想要把矩形回正，需要对图片进行旋转，旋转角度规则：顺时针为负，逆时针为正 要把上述两个矩阵回正需要做的的： Point2f center(src.cols / 2, src.rows / 2); Mat rotm = getRotationMatrix2D(center, rectAngle, 1.0); Mat srcRotate...
antv x6画布内容居中
笑到世界都狼狈的博客
04-20 3454
一般情况下，我们使用antv x6画出的图形在画布中不是居中的状态，看上去很奇怪，所以需要一种方法来实现图形在画布中的居中效果 在官网中找到如下方法： this.graph.centerContent() 文档地址 具体在代码中的使用方法如下图所示： 这样，一个画布居中的效果就实现了 ...
“Error: Ensure the container of the graph is specified and valid“：antv-x6报错
weixin_44213308的博客
12-16 5805
antv-X6快速上手报错： 发现原因是因为： 正确的代码如下： <template> <div id="container"> </div> </template> <script> import { Graph } from '@antv/x6'; const data = { // 节点 nodes: [ { id: 'node1', // String，可选，节点的唯一标识
recttransform transform
09-22
RectTransform是Unity中用于布局和控制UI元素的组件。它是Transform的派生类，可以看作是Transform的升级版。RectTransform有一些额外的重要功能，如锚点(Anchors)和中心点(pivot)。 锚点决定了UI元素在其父物体中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值