xinglie / report-designer

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

拖动对齐 #42

Open xinglie opened 3 years ago

xinglie commented 3 years ago

添加到设计区中的元素,在拖动时,会和非拖动元素自动对齐,示意图如下

image

其中平铺图片是正在拖动中的元素,当元素的顶、中间、底边以及左、中间、右边与另外元素的关键边靠近时,会自动吸附对齐。

吸附阈值目前设定为8px,越小越容易脱离吸附,越大越不容易脱离吸附。

当元素旋转后,将以元素所在的矩形进行相应的对齐处理。无论旋转与否,均支持4个顶点、4条边中间点及元素中心点,水平9条垂直9条线的对齐方式。为了解决对齐线过多的问题,目前支持顶点、边中间及中心点通过配置来决定是否参与对齐。

组合元素及多选元素

优先鼠标下的元素参与拖动对齐(可配置为全部移动元素为拖动对齐),仅非移动元素才能成为吸附对齐对象

容器元素

容器及子元素如果不参与移动,则所有子元素也可以成为对齐吸附对象。

网格与吸附网格

网络功能已下线,代码已注释,如果有需求可自行放开网格代码的注释 当吸附网格与拖动对齐均打开时,对齐优先级高

设计区

设计区及容器的格子(小设计区)也支持拖动对齐

alt键

在拖动过程中,如果按下alt键,则可以临时停用吸附对齐。如果通过设计区配置为默认拖动不对齐,在拖动过程中,如果按下alt键,则可以临时启用吸附对齐