介绍 - Githubissues

xinglie commented 4 years ago

可视化设计器

本项目提供可视化设计所需要的基础功能，比如标尺、拖动、旋转、多选、复制等。在此基础之上，设计器中可设计、编辑的元素则由插件化的形式提供，比如需要表格、图片则只添加这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个以上的元素时高亮可用显示

标尺

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

如果需要精细的控制辅助线，请参考辅助线操作说明文档：https://github.com/xinglie/report-designer/issues/18

设计区

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