介绍

[xinglie]

可视化设计器

本项目提供可视化设计所需要的基础功能，比如标尺、拖动、旋转、多选、复制等。在此基础之上，设计器中可设计、编辑的元素则由插件化的形式提供，比如需要表格、图片则只添加这2个插件即可，开发人员也可以很方便的定制自己的插件

两种布局

绝对定位

绝对定位布局要求页面宽和高是固定尺寸的，比如需要投放大屏场景，则根据大屏的尺寸设置好相应的编辑区的大小。再比如需要打印，可针对纸张大小，如A4纸设置好相应的编辑区尺寸

基于绝对定位扩展的通用设计器demo：https://xinglie.github.io/report-designer/iot.html

流式布局

流式布局只需要给定宽度或不设置宽度，高度无须设置，整体自适应页面，这种更适用于活动、报表、管理等一系列的线上展示页面

流式布局demo示意：https://xinglie.github.io/page-designer/

以通用设计器为示例，编辑器讲解

该项目之前定位为物联网编辑器，后转为通用设计器。但下面的示例图片仍沿用之前的物联网的名称

设计元素

可设计的元素在目录　tmpl/elements 下面，可根据需要添加或删除相应的元素，并更新到index.ts中即可。
在插件里面desinger.ts是针对设计器使用的，该文件中指示设计器能设计哪些属性，对元素能否改变宽高、旋转等功能。针对像流式布局需要对设计后的页面做展示时，最终打包的代码并不需要包含designer.ts文件，做到了设计和展示分离

工具栏

工具栏提供撤销、重做功能，同时也支持快捷键Ctrl+Z，Ctrl+Y和Ctrl+Shift+Z
6种对齐方式，需要对齐操作时，需要在设计区中选中2个以上的设计元素对齐按钮才会高亮可用显示
2种同步尺寸的方式，需要同步尺寸时，需要在设计区中选中2个以上的设计元素对齐按钮才会高亮可用显示。默认按选中元素的最大宽或高度同步，如果按下Shift键，则按最小宽度或高度同步尺寸
2种分散对齐方式，同样需要选中2个以上的元素
4种调整z轴的方式，z轴调整只能选中1个元素，如果某个元素已经处于最顶层或最底层，则相应的顶层调整按钮并不会启用
1个删除按钮，需要选中1个以上的元素时高亮可用显示

标尺

当鼠标在标尺上移动时，会显示相应的位置辅助线，在标尺上鼠标点击后，会在相应的位置留下一条固定的辅助线。固定的辅助线也可以拖动改变位置以及删除等操作。

如果需要精细的控制辅助线，请参考辅助线操作说明文档：#18

设计区

可直接拖动页面顶部设计元素添加到设计区相应的位置上。也可点击设计元素，则添加到设计区的左上角，然后再拖动到设计区中希望的位置上。
改变设计元素的位置时，支持选中1个或多个，可直接使用鼠标拖动，可以按下键盘Up、Right、Down、Left四个方向键改变位置。每次按下移动1px，如果在按下方向键的同时，按下Shift键，则每次移动10px

元素面板

可查看当前添加到设计区中的元素，同时也支持鼠标移上后，在设计区中高亮显示相应的可设计元素，支持鼠标拖动调整设计元素在设计区中的z轴。
在元素面板某个元素上单击时，则直接选中该设计元素。在单击的同时按下Shift或Ctrl键时，可同时选中多个设计元素

概览面板

概览面板主要显示整体的布局情况，方便您对整体布局有一个全局观。概览面板中的主题色边框矩形表示当前视窗，同时它也支持拖动改变当前视窗显示的位置

属性面板

根据设计区中选中的元素不同，属性面板中展示的可设计元素的属性也不同。
可设计属性在elements/xx/desinger.ts文件中定义(xx表示相应的插件目录名称)
当设计区中选中2个以上元素时，属性面板显示设计区的属性

贴边滚动

当拖动元素时，会在编辑区的四周显示淡淡的主题色边框条，当拖动元素的鼠标到边框条上时，编辑区则会向该方向滚动

网格

默认编辑区显示背景色及背景的配置，当网格选项打开时，则背景色与背景图隐藏，显示网格选项
网格默认10pxX10px，可自行调整大小，最小4px最大40px，宽与高的值可不同

当网格选项打开且拖动吸附时，拖动的元素则自动磁吸到网格上。
当拖动多个元素时，则以鼠标下的元素为吸附元素，其它元素跟随移动，但不吸附，主要是因为多个元素的间距并不一定是网格的整数倍。

磁吸效果只在拖动时有效，如果通过键盘或右侧的属性面板直接修改坐标信息，则仍以最小单位1px进行。

拖动对齐

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

水平支持对齐某元素左、中、右三个位置，垂直支持对齐某元素上、中、下三个位置

其中设计区及容器元素的格子也支持拖动对齐，同元素提供的对齐位置

支持吸附到自定义辅助线上

更多信息可参考：拖动对齐操作

绝对定位编辑器快捷键大全

相关示例

绝对定位布局

https://xinglie.github.io/report-designer/absolute.html

流式布局

https://xinglie.github.io/report-designer/page.html

通用设计器

https://xinglie.github.io/report-designer/iot.html

获取源代码

请联系微信：qq84685009

[8337009]

功能粒度太細，直男表示不會用，但是確實很強大