飞码LowCode前端技术之画布的设计 | 京东云技术团队
💡
原文中文，约1100字，阅读约需3分钟。
📝
内容提要
本章节从精准定位、分层设计、异步组件、拖拽四个方面分析了飞码画布设计。飞码画布是一个套件，可对外提供画布能力。飞码采用双层设计模式，底层是组件渲染层，上层是canvas-mask视图。飞码支持组件宽度拖拽调整，但不支持上下大小调整。飞码提供常用组件能力，支持动态加载组件。拖拽组件时，需要混入特定处理。飞码的目标是便捷、稳健、0测试，使前端web单页面快速投产。
🎯
关键要点
- 本章节分析飞码画布设计的四个方面：精准定位、分层设计、异步组件、拖拽。
- 飞码画布是一个套件，提供画布能力，支持组件宽度拖拽调整，但不支持上下大小调整。
- 精准定位分为无子组件和有子组件两种情况，需计算拖拽组件与目标组件的位置关系。
- 飞码采用双层设计模式，底层为组件渲染层，上层为canvas-mask视图，解耦组件关系。
- 飞码支持动态加载组件，编辑态和运行态的组件加载方式一致。
- 拖拽组件时需混入特定处理，记录组件id并设置拖拽样式。
- 飞码的目标是便捷、稳健、0测试，以快速投产前端web单页面。
➡️
