(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)

前言

徐小夕介绍了几何学在前端领域的应用，并分享了使用vue3实现图形边界计算算法。此次将从零实现一个几何画板。

你将收获

• vue3 + vite的实用技巧
• 几何画板基本开发思路，包括元素创建、编辑、拖拽、图层管理、撤销和重做、导入导出
• 利用几何和代数学知识解决前端问题

demo演示

徐小夕演示了几何画板的demo，帮助理解接下来的内容。

技术实现

文章继续前文的工程，增加了对less的支持，以便使用less编写样式。介绍了画板搭建的静态和交互部分，并提供了css代码实现点阵背景。

1. 画板搭建

画板分为画布区和侧边控件区，使用css背景样式实现点阵背景。详细代码可在gitee查看。

2. 创建并绘制几何图形

用户可通过鼠标在画布拖动创建图形。需要定义图形的schema结构和根据鼠标位置计算图形信息。

3. 移动, 编辑几何图形

移动元素时，通过鼠标拖拽更新元素位置。编辑元素包括改变属性和删除操作。

4. 图层管理, 图片导出等方案介绍

图层管理是编辑器常用功能，通过canvasBox实现图层管理面板，并计划在后续文章中实现撤销重做、样式编辑和图片导出等功能。

5. 后期规划

计划实现更多功能模块，包括图层管理面板、样式编辑、图片导出等，以完善几何画板应用。

6. 更多推荐

• 几何学在前端边界计算中的应用和原理分析
• Dooring无代码搭建平台技术演进之路
• 从零开发一款可视化大屏制作平台
• 从零开发一款图片编辑器Mitu