低代码画布以及组件拖拽库调研

1、场景需求, 

        各模块对画布以及拖拽功能的要求:

        · 流程: 画布需要支持缩放以及拖动(有标尺更好)、拖拽库要求能支持自由拖拽

        ·对象: 画布需要支持拖动自由拖拽

        ·页面设计器: 暂无特别要求, 支持拖拽排序和自由拖拽

综合来看,需要支持: 画布: 缩放、拖动、标尺;

        拖拽库: 拖拽排序、自由拖拽

2、调研分析:

阿里Antv G6  https://g6.antv.vision/zh/docs/manual/introduction

可以看到底层G6是通过Canvas和Webgl来实现画布处理的，但是webGL对浏览器兼容性并不是很友好，一些旧版浏览器的支持性不是很好。

总之，还是一个很强大的图可视化管理工具，其中有些设计思路还是很值得参考。

Infinite-viewer+sortablejs+moveablejs

• 画布：react-infinite-viewer（react-infinite-viewer - npm）
• 排序拖拽：sortablejs（GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.）
• 自由拖拽：moveablejs（GitHub - daybrush/moveable: Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!）