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() // 将画布中元素居中展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2017年喜茶数字营销变化

1. 什么是数字营销&#xff1f;数字化时代&#xff0c;消费者行为模式发生了哪些变化&#xff1f; 数字营销是指使用数字渠道和平台&#xff0c;通过在线手段推广产品或服务&#xff0c;与目标受众进行互动和沟通的一种营销方式。它涵盖了多种在线渠道&#xff0c;包括社交媒…

华为云云耀云服务器L实例评测|Python Selenium加Chrome Driver构建UI自动化测试实践

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;AWS/阿里云资深使用…

HackTheBox - Medium - Linux - Bagel

Bagel 今天我开始了《Red Team Development and Operations A Practical Guide》的学习&#xff0c;保持学习&#xff0c;后面差不多到时机后就学CRTOⅡ Bagel 是一款中等难度的 Linux 机器&#xff0c;其特点是电子商店容易受到路径遍历攻击&#xff0c;通过该攻击可以获取应…

使用vmware,在ubuntu18.04中使用笔记本的摄像头

步骤1&#xff1a;在windows中检查相机状态 win10系统中&#xff0c;在左下的搜索栏&#xff0c;搜索“相机”&#xff0c;点击进入即可打开相机&#xff0c;并正常显示图像。 注意&#xff1a;如果相机连接到了虚拟机&#xff0c;则不能显示正常。 步骤2&#xff1a;在ubuntu…

STM32——通用计时器

通用计时器框图 1.时钟源 1&#xff09;内部时钟(CK_INT) 2&#xff09;外部时钟模式 1&#xff1a;外部输入引脚(TIx)&#xff0c;x1&#xff0c;2&#xff08;即只能来自于通道 1 或者通道 2&#xff09; 3&#xff09;外部时钟模式 2&#xff1a;外部触发输入(ETR) 4&#…

ARCGIS PRO SDK 访问Geometry对象

一、Geometry常用对象 二、主要类 1、ReadOnlyPartCollection&#xff1a;Polyline 和 Polygon 使用的 ReadOnlySegmentCollection 部件的只读集合&#xff0c;属性成员&#xff1a;​ 名字描述Count获取 ICollection 中包含的元素数。TIEM获取位于指定索引处的元素。Spatial…

mac中excel条件格式找到每一列的最大值并标红

假设现在excel有A1:R24组数据&#xff0c;最终效果如下 先选择要处理数据的第一列&#xff0c;然后点击【条件格式】-【新建规则】 style选择【classic】以及【Use a formula to determine which cells to format】&#xff0c;输入规则【C3MAX(C$3:C$24)】 注意这里C$3前面没…

Rust开发⼲货集(1)--迭代器与消费器

本内容是对 Rust开发干货集[1] 的实践与扩展. iter() 不转移所有权 先简单解释下什么叫"转移所有权": 在 Rust 中&#xff0c;"转移所有权"&#xff08;Ownership Transfer&#xff09;是一种核心概念&#xff0c;它涉及变量和数据的所有权从一个实体转移…

3D视觉-结构光测量-线结构光测量

概述 线结构光测量中&#xff0c;由激光器射出的激光光束透过柱面透镜扩束&#xff0c;再经过准直&#xff0c;产生一束片状光。这片光束像刀刃一样横切在待测物体表面&#xff0c;因此线结构光法又被成为光切法。线结构光测量常采用二维面阵 CCD 作为接受器件&#xff0c;因此…

QT上位机开发(乘法计算小软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面一篇文章&#xff0c;我们学习了怎么创建qt的第一个工程&#xff0c;怎么用designer给qt修改界面。虽然我们到目前为止&#xff0c;还没有编写…

C#使用switch语句更改窗体颜色

目录 一、示例 二、生成 用switch多路选择语句及窗体的BackColor属性更改窗体的BackColor属性。该属性用于获取或设置控件的背景颜色。 可以使用Color结构的静态属性获取Color对象&#xff0c;如Color.Red&#xff1b;也可以使用Color结构的静态方法Color.FromArgb()&#xf…

Linux权限的基本理解

一:&#x1f6a9;Linux中的用户 1.1&#x1f966;用户的分类 &#x1f31f;在Linux中用户可以被分为两种用户: 超级用户(root):可以在Linux系统中做各种事情而不被约束普通用户:只能做有限的事情被权限约束 在实际操作时超级用户的命令提示符为#,普通用户的命令提示符为$,可…

python观察图像的直流分量——冈萨雷斯数字图像处理

原理 在数字图像处理中&#xff0c;图像的直流分量&#xff08;DC分量&#xff09;是指图像中的平均亮度水平。这个概念源自于傅里叶变换&#xff0c;其中信号可以分解为多个频率成分。在这个上下文中&#xff0c;直流分量对应于频率为零的成分&#xff0c;即信号的平均值。 在…

CSS一个纯样式花里胡哨的动态渐变背景块

使用SASS或CSS纯样式花里胡哨的动态渐变背景块 鼠标放在小方块上会放大并挤压周围方块&#xff0c;背景颜色会动态改变。 效果如下 HTML结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"vie…

基于JWT的用户token验证

1. 基于session的用户验证 2. 基于token的用户身份验证 3. jwt jwt代码实现方式 1. 导包 <dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.18.2</version> </dependency> 2. 在登录…

Spring Data Redis对象缓存序列化问题

相信在项目中&#xff0c;你一定是经常使用 Redis &#xff0c;那么&#xff0c;你是怎么使用的呢&#xff1f;在使用时&#xff0c;有没有遇到同我一样&#xff0c;对象缓存序列化问题的呢&#xff1f;那么&#xff0c;你又是如何解决的呢&#xff1f; Redis 使用示例 添加依…

C++/CLI——1简介

C/CLI——1简介 如果你是.net程序员&#xff0c;不免会用到C/C写的库。对于简单的调用&#xff0c;可以直接使用DllImport来完成就可以&#xff0c;详情可参考C#调用C/C从零深入讲解。但是对于复杂的C类和对象&#xff0c;尤其是类似于OCC的大型C项目&#xff0c;DllImport可能…

初识大数据,一文掌握大数据必备知识文集(6)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

三子棋(c语言)

前言&#xff1a; 三子棋是一种民间传统游戏&#xff0c;又叫九宫棋、圈圈叉叉棋、一条龙、井字棋等。游戏规则是双方对战&#xff0c;双方依次在9宫格棋盘上摆放棋子&#xff0c;率先将自己的三个棋子走成一条线就视为胜利。但因棋盘太小&#xff0c;三子棋在很多时候会出现和…

Android Studio配置国内镜像源和HTTP代理/解决:Android Studio下载gradle速度慢的问题

&#xff08;方案一&#xff09;Android Studio配置国内镜像源和HTTP代理 一、配置国内镜像源/依赖库 1.1 打开项目的setting.gradle.kts文件 配置进去 pluginManagement {repositories {maven { urluri ("https://www.jitpack.io")}maven { urluri ("https:…