Antv X6 画布平移

已于 2022-11-09 08:53:05 修改
阅读量1.1k 收藏
点赞数 2
分类专栏： Antv X6 文章标签： antv x6 antv x6平移 x6平移画布 拖拽平移画布 panning
于 2022-04-20 19:29:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36509946/article/details/124305121
版权

Antv x6想要实现鼠标拖拽时平移画布，需要加上以下属性即可：

panning: true // 拖拽平移

代码布局：

 文档地址

 效果图如下：

笑到世界都狼狈
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】AntV X6学习笔记
lcukyNwa的博客
11-16 945
/ 注册自定义模板节点 'custom-image'width: 62, // 节点宽度height: 62, // 节点高度markup: [selector: 'body', // 节点外部矩形},},},],attrs: {body: {stroke: 'green', // 外部矩形边框颜色fill: 'pink', // 外部矩形填充颜色},image: {refWidth: '100%', // 图片宽度和节点宽度一致。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
antv x6 实现拖拽
七月❤的博客
06-14 3264
拖拽
antvX6 - Vue自定义节点，并实现多种画布操作，拖拽、缩放、连线、双击、检索等等
xiaoleiv9的博客
03-01 1421
一个节点！
antv x6 拖拽流程DEMO
04-26
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：https://x6.antv.antgroup.com/tutorial/about 本作品是结合官网DEMO做了扩展功能，可保存数据和导入数据。
antV-X6-demo-master.zip
04-16
antv-x6最新示例代码
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY
qq_41261490的博客
08-04 1262
在官网项目中，需要使用一个地图，展示产品的分布区域及数量。希望的交互是，鼠标放上标点，tooltip展示地点和数量等信息。鼠标滚动，则页面随着滚动。但是鼠标事件是被地图代理了的，鼠标滚动意味着地图的缩放。这个设置了之后，我们发现鼠标在地图上是滚不动的状态，就是我们无论如何滚动鼠标，页面都没有动静。其实就是我们的鼠标事件被地图给代理了，但是他这里没有处理我们禁用了缩放和拖拽之后，将鼠标事件脱离代理。以此记录一下这个问题的解决办法，也加深一下自己对这个属性的了解。我们首先想到的就是关闭地图的缩放。
antv x6 开启画布平移功能，拖拽节点，节点被遮挡
K__moving的博客
03-10 1767
autoResize导致平移画布的时候 画布延长了，但是节点被遮挡。
「AntV」X6开发实践：踩过的坑与解决方案
qq_43156442的博客
06-01 3625
相信你们在开发中更多的需求是需要自定义拖拽源，毕竟自定义的功能扩展性高一些，而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是：万物皆可成为拖拽源，不管你使用的是html标签，还是第三方的ui框架，或者树形列表，……这些都可以设置成拖拽源，只有你想不到的，没有官方做不到的，来吧，开整。这里使用的是Dnd插件，因为我看官方介绍说Stencil插件内部也是依靠Dnd实现的，索性就直接使用Dnd来搞吧/*** 自定义拖拽源事件* @param {*} treeNode 根据需要传入要添加的参数。
antv-X6-Vue3总结02-普通节点配置
eadela的博客
11-26 4627
<!-- * 节点与边的交换 --> <template> <div id="containered" ref="containered" /> </template> <script lang="ts" setup> /*eslint-disable */ import { ref, computed, onMounted } from 'vue' import { Graph, Shape } from '@antv/x6'; con
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
vue2使用antv x6案例（功能齐全）
asscas的博客
08-17 4650
因为是把已经他当作组件来使用，所以大家使用的时候有些需要改一下，大部分的功能都在里面了，希望可以帮到大家。
Vue3.x中使用AntV G6绘制力导图实现自适应
BreenCL的博客
12-05 4158
项目下使用绘制图谱；图谱节点为两个地址，节点间存在多条连线情况需求；鼠标悬浮到节点上方时，高亮当前节点并出现气泡提示，展示相关信息；点击图谱连线后需要高亮关联节点和当前连线；图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗内的自适应
介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
wzy_PROTEIN的博客
03-01 2047
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
AntV G6鼠标移入、单击、双击节点，获取节点信息
热门推荐
笑到世界都狼狈的博客
12-24 1万+
如下图所示，对节点常用的事件如下图所示： 主要代码： // 鼠标进入节点 this.graph.on('node:mouseenter', (e) => { const nodeItem = e.item // 获取鼠标进入的节点元素对象 console.log('鼠标移入', nodeItem._cfg) }) // 单击节点 this.graph.on('node:click', (e) => { const nodeItem = e.item // 获取被
Vue2.0+AntvX6——画布graph
ZMN0057的博客
08-21 4133
vue2.0 vue antv-x6 的画布基本常用的属性
Google已经推出了Google VR SDK，
最新发布
05-11
VR（Virtual Reality）即虚拟现实，是一种可以创建和体验虚拟世界的计算机技术。它利用计算机生成一种模拟环境，是一种多源信息融合的、交互式的三维动态视景和实体行为的系统仿真，使用户沉浸到该环境中。VR技术通过模拟人的视觉、听觉、触觉等感觉器官功能，使人能够沉浸在计算机生成的虚拟境界中，并能够通过语言、手势等自然的方式与之进行实时交互，创建了一种适人化的多维信息空间。 VR技术具有以下主要特点： 沉浸感：用户感到作为主角存在于模拟环境中的真实程度。理想的模拟环境应该使用户难以分辨真假，使用户全身心地投入到计算机创建的三维虚拟环境中，该环境中的一切看上去是真的，听上去是真的，动起来是真的，甚至闻起来、尝起来等一切感觉都是真的，如同在现实世界中的感觉一样。 交互性：用户对模拟环境内物体的可操作程度和从环境得到反馈的自然程度（包括实时性）。例如，用户可以用手去直接抓取模拟环境中虚拟的物体，这时手有握着东西的感觉，并可以感觉物体的重量，视野中被抓的物体也能立刻随着手的移动而移动。 构想性：也称想象性，指用户沉浸在多维信息空间中，依靠自己的感知和认知能力获取知识，发挥主观能动性，寻求解答，形成新的概念。此概念不仅是指观念上或语言上的创意，而且可以是指对某些客观存在事物的创造性设想和安排。 VR技术可以应用于各个领域，如游戏、娱乐、教育、医疗、军事、房地产、工业仿真等。随着VR技术的不断发展，它正在改变人们的生活和工作方式，为人们带来全新的体验。
antv x6 组态
07-29
ANTV X6组态是一款先进的工业视觉软件，可以实现对工业设备和生产过程的监控和控制。该软件具有以下几个主要特点和功能。 首先，ANTV X6组态具有强大的数据采集和分析能力。它可以实时采集各种传感器和设备的数据，并对其进行处理和分析，帮助用户了解设备运行状态和生产过程中的关键指标。用户可以通过直观的界面和仪表板，随时查看设备状态并进行数据分析，以便及时对设备进行维护和优化生产过程。 其次，ANTV X6组态具有灵活的报警和监控功能。用户可以设置各种报警条件和规则，当设备发生异常或超出预设范围时，系统会立即发出警报通知用户。同时，用户可以通过远程监控功能，随时远程查看设备状态，并进行远程控制和操作，实现远程管理和控制。 此外，ANTV X6组态支持多种通讯协议和接口，可以与各种设备和系统进行无缝集成。用户可以轻松连接不同厂商和类型的设备，实现设备之间的数据共享和相互控制，提高生产效率和设备运行稳定性。 最后，ANTV X6组态还提供了丰富的可视化和人机交互功能。用户可以通过拖拽和配置界面，自定义展示和操作界面，以适应不同应用场景和用户需求。同时，软件还支持触摸屏和移动设备等多种操作方式，使用户可以随时随地进行设备监控和控制。 总之，ANTV X6组态是一款功能强大、灵活可靠的工业视觉软件，为用户提供了全面的设备监控和控制解决方案，帮助提高生产效率和设备运行稳定性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值