fdrawing - 基于 Vue 3 的在线绘图应用

fdrawing - 基于 Vue 3 的在线绘图应用

项目简介

fdrawing 是一个现代化的在线绘图应用，为用户提供了一个直观、功能丰富的绘图平台。该项目采用最新的前端技术栈，为用户带来流畅的绘图体验。

在线演示

🌐 在线体验地址：fdrawing.scory.top/

核心功能

• 专业的绘图功能
• 支持擦除功能
• 画布导出功能
• 响应式设计

技术栈

1. 前端框架

   • Vue 3 - 采用最新的 Vue 3 框架，提供更好的性能和开发体验
   • Vite - 现代化的构建工具，提供极速的开发体验

2. 核心库

   • Fabric.js - 强大的 Canvas 绘图库，提供丰富的绘图功能
   • fabric-with-erasing - 支持擦除功能的 Fabric.js 扩展
   • html2canvas - 支持将画布内容导出为图片
   • lodash-es - 提供实用的工具函数

3. 开发工具

   • SASS - 强大的 CSS 预处理器
   • Vue DevTools - 提供便捷的开发调试功能

项目特点

1. 现代化架构

   • 采用 Vue 3 组合式 API
   • 使用 Vite 作为构建工具，开发体验更快速
   • 模块化的代码组织

2. 用户友好

   • 直观的界面设计
   • 流畅的绘图体验
   • 支持导出功能

3. 开发友好

   • 完整的开发工具链
   • 热重载支持
   • 清晰的代码结构

推荐开发环境

VSCode + Volar (需要禁用 Vetur)

项目设置

安装依赖

npm install

开发环境运行

npm run dev

生产环境构建

npm run build

使用场景

• 在线白板应用
• 简单的图片编辑工具
• 教育类绘图应用
• 创意设计工具

配置说明

更多配置信息请参考 Vite 配置文档