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

前言

hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。

本文是 100+前端几何学应用案例 专栏的第二篇文章, 在第一篇文章几何学在前端边界计算中的应用和原理分析 中我介绍了几何学在前端领域里的应用, 同时用 vue3 带大家一起实现了常见图形的边界计算算法, 并且分享了如何用几何原理和Web Dom生成任意三角形的方式:

image.png

如果大家感兴趣可以在 gitee 查看我的具体代码实现: https://gitee.com/lowcode-china/euryd

接下来就继续这个话题, 我们进一步扩展, 来从零实现一个几何画板。

你将收获

• vue3 + vite的实用技巧

• 几何画板的基本开发思路

  • 元素创建,

  • 编辑,

  • 拖拽,

  • 图层管理

  • 撤销和重做

  • 导入导出

• 利用几何和代数学知识解决前端问题

demo演示

在分享方案之前, 我先给大家演示一下做好的demo, 这样可以更好的理解我们接下来要做的事情:

2022-10-15 10.16.31.gif

技术实现

我们继续沿用上一篇文章几何学在前端边界计算中的应用和原理分析的工程, 由于几何画板相当于一个独立的小应用, 具备一定的复杂度, 这里我们来对 vite 工程配置一下对 less 的支持:

1. 安装 less 和less-loader (推荐yarn, pnpm)

2. 在vite.config.ts里做如下配置:

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
        less: {
            modifyVars: {
                hack: `true; @import (reference) "${path.resolve("src/base.less")}";`,
            },
            javascriptEnabled: true,
        },
    },
  },
})

这样配置完成之后我们就可以在 vite项目 里用 less 的方式写样式代码了, modifyVars属性里面的配置是为了指定 less 全局变量的地址, 这样我们可以把主题, 通用样式放在该目录下, 以便直接在项目的任何页面直接使用。

好了, 准备工作完成了, 我们开始接下来的实现部分。

1. 画板搭建

画板搭建主要是静态和交互部分, 这里简单和大家介绍一下基本构造:

image.png

上图可知画板主要分两个部分:

• 画布区(包含记录鼠标移动坐标的文本提示)

• 侧边控件区

画布的点阵背景我们用 css 的背景样式实现, 这块网上也有很多教程, 我就不一一和大家分析了,这里直接上实现的代码, 大家可以拿来就用:

section .card {
  position: relative;
  height: 480px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(rgba(9, 89, 194, 0.3) 6%, transparent 0),
    radial-gradient(#faf9f8 6%, transparent 0);
  background-size: 10px 10px;
  backg