xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
902 stars 232 forks source link

元素磁吸连接点 #67

Open xinglie opened 1 year ago

xinglie commented 1 year ago

svg元素中,部分元素如直线bezier等由点来描述的图形信息 如果要修改图形,则需要修改点的位置。

为了方便svg图形的点的修改,之前版本已实现自动磁吸对齐自身或其它svg元素的点的坐标。

在实际应用中,尤其在IoT场景下,通常我们会用图片来展示如锅炉风机水泵等。

当我们拖动svg中的管道和如水泵连接时,不同的水泵图片需要连接到的位置不一样,我们可以通过高亮管道的某一个控制点使用键盘进行微调,显然这样的方式效率不高

为了更方便元素间连接,现为普通元素也增加磁吸点,如下图

image

上图中品牌色的点则是磁吸点。

磁吸点允许自由定义或提前内置,允许管理者自由修改位置。

允许其它元素与磁吸点吸附对齐,同时对svg使用描述的图形,支持拖动svg元素的时,磁吸到普通元素的磁吸点上

该功能主要是便于管道与其它元素进行连接

同时带有磁吸点的元素也支持相互吸附对齐,不但便于连接,也更便于排版对齐等操作。因为带有磁吸点的元素不仅仅依靠元素的外接矩形吸附对齐,也支持内部磁吸点的吸附对齐。