antv/x6_2.0学习使用(二、画布)

2023-12-27 16:22:16

画布

一. 创建容器
  • 在页面中创建一个 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, // 是否允许边链接到另一个边,默认为 true
		allowMulti: false, // 是否允许在相同的起始节点和终止之间创建多条边,默认为 true
		allowLoop: false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,默认为 true
		allowBlank: 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() // 将画布中元素居中展示

文章来源:https://blog.csdn.net/weixin_47872719/article/details/135245048
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。