LogicFlow 学习笔记——6. LogicFlow 基础 网格 Grid

网格 Grid

网格是渲染或移动节点时的基本单元。其主要功能是在节点移动过程中,确保每个节点的中心点都精准落在网格点上,这大大有利于节点之间的精确对齐。通常,网格的间距越大,流程图编辑时的对齐越为便捷;反之,间距越小,节点拖动的操作感会更加流畅。

默认情况下,网格是关闭的,最小的渲染/移动单位是1px。如果启用网格功能,则默认的网格大小为20px,这意味着节点在渲染时会以20px为单位进行对齐,移动节点时每次最少移动20px。

注意
设置节点坐标时,系统会根据网格大小调整坐标值,例如,原始坐标设置为{x: 124, y:138}的节点,实际渲染到画布上的位置会被调整为{x: 120, y: 140}。因此,在用 LogicFlow 替换项目中旧的流程设计器时,需要对旧数据的坐标进行相应的调整。
在具体的开发过程中,如果需要节点既能中心对齐又能边缘对齐,那么自定义节点的宽高应该是网格尺寸的偶数倍,例如,如果网格尺寸为20px,则节点的宽度应优选为20、40、80、120等偶数倍。

开启网格

在创建画布时,可以通过配置grid属性来启用网格功能。启用网格并采用默认设置:

const lf = new LogicFlow({grid: true,
});// 默认设置如下
const lf = new LogicFlow({grid: {size: 20,visible: true,type: "dot",config: {color: "#ababab",thickness: 1,},},
});

设置网格属性

可以自定义网格的大小、类型、颜色和线条宽度等属性。

export type GridOptions = {size?: number  // 网格大小visible?: boolean,  // 是否显示网格线,设置为false则不显示但保留网格效果type?: 'dot' | 'mesh', // 网格类型,可选点状(dot)或线状(mesh)config?: {color: string,  // 网格颜色thickness?: number,  // 网格线宽度}
};

官方文档

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

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

相关文章

UNIAPP-ADB无线调试

ADB下载 SDK 平台工具版本说明 | Android Studio | Android Developers (google.cn) 环境变量配置 ADB版本查看 adb version 手机使用数据线连接到电脑 手机需要授权adb调试(开发人员选项里面) CMD输入命令 adb tcpip 5555 到了这一步你手机已经启动了adb服务了&…

vue 生命周期 钩子函数 keep-alive activated deactivated

一、activated deactivated 在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。在 2.2.0 及其更高版本中,activated 和 deactivated 将会在树内的所有嵌套组件中触发。activated在组件第一次渲染时会被调用&#x…

kafka 快速上手

下载 Apache Kafka 演示window 安装 编写启动脚本,脚本的路径根据自己实际的来 启动说明 先启动zookeeper后启动kafka,关闭是先关kafka,然后关闭zookeeper 巧记: 铲屎官(zookeeper)总是第一个到,最后一个走 启动zookeeper call bi…

2024 Idea最新激活码

idea的激活与安装 操作如下: ① 打开网站:https://web.52shizhan.cn 切换到:激活码,点击获取 ② 这个时候就跳转到现成账号页面,点击获取体验号,如图 ③ 来到了获取现成账号的页面了。输入你的邮箱账号即…

Flutter笔记:关于WebView插件的用法(上)

Flutter笔记 关于WebView插件的用法(上) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:htt…

PaddleDetection快速体验quick_start

1 快速体验 # 设置显卡 export CUDA_VISIBLE_DEVICES0# 用PP-YOLO算法在COCO数据集上预训练模型预测一张图片 python tools/infer.py -c configs/ppyolo/ppyolo_r50vd_dcn_1x_coco.yml -o use_gputrue weightshttps://paddledet.bj.bcebos.com/models/ppyolo_r50vd_dcn_1x_coc…

针对oracle系列数据库慢数据量大的问题

-- 确保索引存在 create index idx_risk_assessment_hazard on risk_assessment_hazard(data_time, perception_id); create index idx_risk_dispose_base_info on risk_dispose_base_info(perception_id); -- 使用并行查询和with子句进行优化 explain plan for with t2 as (se…

官宣!2024影响因子即将公布,或将迎来这些重大变化!

【SciencePub学术】IF是Impact Factor,即我们俗称的“影响因子”,是衡量学术期刊一个重要性的指标。它通过计算期刊上发表的文章在特定时间内被引用的平均次数来评估期刊的影响力。 影响因子计算公式 影响因子(IF)(期…

vue3实战练习之红包雨,抢红包案例

抢红包案例 每当618消费节到来时,某宝、某多,等购物网站都会退出各种活动,其中抢红包,优惠券等红包雨活动很是火热,于是就通过vue的知识来做一个红包雨,抢红包加分活动!代码中红包的路径改成自己…

2024年人工智能与云计算国际会议(ICAICC 2024)

2024 International Conference on Artificial Intelligence and Cloud Computing 【1】大会信息 大会时间:2024-07-19 大会地点:中国长沙 截稿时间:2024-07-05(以官网为准) 审稿通知:投稿后2-3日内通知 会议官网&am…

看完“土猪拱白菜“的张锡峰,我明白计算机有多难了

计算机有多难? 今天无意中,看到一篇关于「"土猪拱白菜"学霸后悔报考浙大计算机」的文章。 或许会有不少和我刚开始一样懵圈的同学:张锡峰是谁?"土猪拱白菜"又是什么梗? 带着疑惑,我打开…

ViewModel、Lifecycles、LiveData基本使用

以下是使用Java实现ViewModel、Lifecycles和LiveData的基本用法,以及它们的原理简述。 ViewModel的基本使用(Java) 1. 引入依赖 在你的build.gradle文件中添加以下依赖: implementation androidx.lifecycle:lifecycle-viewmod…

MySQL查询性能优化解决方案

解决方案 主键与默认常用查询字段建立索引,普通字段类型选择 UNIQUE,索引方法 BTREE ;长文本使用 FULLTEXT,索引方法为无; 新建表时引擎默认设置为 MyISAM,不使用 InnoDB,因为 MyISAM 支持 MAT…

Tita 360评估:有效 360度反馈流程的 10 大步骤

宣传过程 如果你的公司首次引入多方位反馈或 360 度反馈,那么向所有利益相关者描述这一流程至关重要。由于流程太新,很多人还不了解。确保参与该流程的每个人都了解其目的,以及将如何实施该流程和使用其结果。花时间在一对一会议、小组会议和…

拆分shp数据要素为多个shp

我有一个各县shp文件,我想要拆分成不同的要素,命名根据NAME字段进行命名,字段值是字符串,以下为基于arcpy的python实现代码。(python2.7) import arcpy import os# 设置工作空间和输入的 shapefile 文件路…

python的a[:2]、a[:] 和a [::] 的区别

一、a[:2] 数据准备 import numpy as np X np.array([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11],[12,13],[14,15],[16,17],[18,19]]) print(X)形成矩阵 print (“X[: 2]:”, X[: 2]) ### :表示索引 0至1行; 二、a[:]和a [::] 在 Python 中,[:] 和 [::…

SQL Server 安装后,服务器再改名,造成名称不一致,查询并修改数据库服务器真实名称

SELECT SERVERNAME -- 1.查询旧服务器名称 SELECT serverproperty(servername) AS new --2.查询新服务器名称 -- 3.更新服务器名称 IF SERVERPROPERTY(servername) <> 新服务器名称替换 BEGIN DECLARE server_name NVARCHAR(128) SET server_name 新服务器…

Webrtc支持FFMPEG硬解码之Intel(一)

前言 此系列文章分分为三篇, Webrtc支持FFMPEG硬解码之Intel(一)-CSDN博客 Webrtc支持FFMPEG硬解码之NVIDA(二)-CSDN博客 Webrtc支持FFMPEG硬解码之解码实现(三)-CSDN博客 AMD硬解目前还没找到可用解码器,欢迎留言交流 环境 Windows平台 VS20

Linux部署项目

手动部署 1.在IDEA写一个有关springboot项目 在windows客户端可以通过localhost:8080/hello 访问 2.用packge 命令将该springboot项目打包 并在target目录下找到打包的jar包 3.上传到linux上 个人习惯在usr/local/app 下上传该项目 创建切换到app目录下 mkdir /usr/local/ap…

无文件落地分离拆分-将shellcode从文本中提取-file

马子分为shellcode和执行代码. --将shellcode单独拿出,放在txt中---等待被读取执行 1-cs生成python的payload. 2-将shellcode进行base64编码 import base64code b en_code base64.b64encode(code) print(en_code) 3-将编码后的shellcode放入文件内 4-读取shellcod…