antv/x6_2.0学习使用（二、画布）-编程知识

antv/x6_2.0学习使用（二、画布）

画布

一. 创建容器

在页面中创建一个 div 标签，用来容纳画布

<div id="container"></div>

画布常用配置信息

const graph = new Graph({container: graphRef.value, // 画布容器width: 800, // 画布宽度，默认使用容器宽度height: 600, // 画布高度，默认使用容器高度autoResize: false, // 是否监听容器大小改变，并自动更新画布大小。background: { color: "#F2F7FA" },grid: {// 网格，默认使用 10px 的网格，但不绘制网格背景size: 10,visible: true,// 网格类型，内置四种网格类型// dot(默认值) -> 点状网格// fixedDot -> 固定网点大小的点状网格。当画布的缩放比例小于 1 时，网点大小随着画布缩放比例缩放，当画布缩放比例大于 1 时，网点大小为给定的 thickness 的值。// mesh -> 网状网格// doubleMesh -> 双线网状网格type: "doubleMesh",args: [{color: "#eee", // 主网格线颜色thickness: 1, // 主网格线宽度},{color: "#ddd", // 次网格线颜色thickness: 1, // 次网格线宽度factor: 4, // 主次网格线间隔},],},panning: {// 画布是否可以拖拽平移，默认禁用。enabled: true, // 是否开启画布平移交互。// 触发画布平移的交互方式。支持三种形式或者他们之间的组合：// leftMouseDown: 按下鼠标左键移动进行拖拽// rightMouseDown: 按下鼠标右键移动进行拖拽// mouseWheel: 使用鼠标滚轮滚动拖拽// mouseWheelDown: 按下鼠标滚轮进行拖拽eventTypes: ["rightMouseDown"],},mousewheel: true, // 鼠标滚轮缩放，默认禁用connecting: {allowEdge: false, // 是否允许边链接到另一个边，默认为 trueallowMulti: false, // 是否允许在相同的起始节点和终止之间创建多条边，默认为 trueallowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 trueallowBlank: false, // 是否允许连接到画布空白位置的点validateConnection({// 在移动边的时候判断连接是否有效，如果返回 false，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素sourceView,targetView,sourceMagnet,targetMagnet,}) {if (!sourceMagnet) return false;if (!targetMagnet) return false;return true;},},embedding: {//可以将一个节点拖动到另一个节点中，使其成为另一节点的子节点enabled: true,findParent({ node }) {const bbox = node.getBBox();return this.getNodes().filter((node) => {// 只有 data.parent 为 true 的节点才是父节点const data = node.getData();if (data && data.parent) {const targetBBox = node.getBBox();return bbox.isIntersectWithRect(targetBBox);}return false;});},},
});

二. 渲染节点和边

X6 支持 JSON 格式数据，该对象中 nodes 代表节点数据，edges 代表边数据，可以使用 attrs 属性来定制节点和边的样式（可以类比 CSS）。

// 画布加载的数据
const data = {nodes: [{id: "node1",shape: "rect",x: 40,y: 40,width: 100,height: 40,label: "hello",attrs: {body: {stroke: "#8f8f8f",strokeWidth: 1,fill: "#fff",rx: 6,ry: 6,},},},{id: "node2",shape: "rect",x: 160,y: 180,width: 100,height: 40,label: "world",attrs: {body: {stroke: "#8f8f8f",strokeWidth: 1,fill: "#fff",rx: 6,ry: 6,},},},],edges: [{shape: "edge",source: "node1",target: "node2",label: "x6",attrs: {line: {stroke: "#8f8f8f",strokeWidth: 1,},},},],
};graph.fromJSON(data); // 画布渲染数据
graph.centerContent(); // 将画布内容中心与视口中心对齐

以下是效果图

三. 画布大小自适应问题

在实例化 Graph 对象的时候，可以通过设置 width 和 height 固定画布大小，如果不设置，就会以画布容器大小初始化画布。

在项目实践中，经常会遇到下面两种场景：
- 画布容器还没有渲染完成（此时尺寸为 0），就实例化画布对象，导致画布元素显示异常。
- 页面的 resize 导致画布容器大小改变，导致画布元素显示异常。

可以使用 autoResize 配置来解决上述问题。

<!-- 注意，使用 autoResize 配置时，需要在画布容器外面再套一层宽高都是 100% 的外层容器，在外层容器上监听尺寸改变，当外层容器大小改变时，画布自动重新计算宽高以及元素位置。 -->
<div style="width:100%; height:100%"><div id="container"></div>
</div>

const graph = new Graph({container: document.getElementById("container"),autoResize: true,
});

三. 常用AIP

graph.resize(800, 600) // resize 画布大小
graph.translate(20, 20) // 在 x、y 方向上平移画布
graph.zoom(0.2) // 将画布缩放级别增加 0.2（默认为1）
graph.zoom(-0.2) // 将画布缩放级别减少 0.2
graph.zoomTo(1.2) // 将画布缩放级别设置为 1.2
// 将画布中元素缩小或者放大一定级别，让画布正好容纳所有元素，可以通过 maxScale 配置最大缩放级别
graph.zoomToFit({ maxScale: 1 })
graph.centerContent() // 将画布中元素居中展示