# strokeBase

**Repository Path**: anrainie/stroke-base

## Basic Information

- **Project Name**: strokeBase
- **Description**: 素描辅助工具
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 素描辅助工具

一个专为素描爱好者设计的辅助工具，提供图像处理、辅助线、定点等功能，帮助用户更准确地进行素描创作。

## 功能特点

### 1. 图片素材管理
- 支持拖放上传图片
- 图片预览和管理
- 图片删除功能

### 2. 画布核心功能
- 图片加载和显示
- 画布拖拽和缩放
- 无级放大缩小（以鼠标位置为中心）

### 3. 辅助工具
- **等分辅助线**：水平和垂直方向的等分辅助线，支持调整粒度（1/2, 1/4, 1/8, 1/16）
- **定点功能**：在图片上打点，显示坐标和百分比占比
- **区域辅助**：选择区域并独立调整辅助线粒度

### 4. 图像处理
- **黑白模式**：将图片转为黑白模式，支持调整明暗度
- **黑白灰区块**：根据像素亮度生成黑白灰区块，支持调整区块大小和阈值

### 5. 截图工具
- 对当前可视区域进行截图
- 截图管理和切换
- 截图删除功能

### 6. 用户界面
- 响应式布局，适配不同屏幕尺寸
- 深色模式支持
- 键盘快捷键支持

## 技术栈

- **前端**：Vue 3 + TypeScript + Vite
- **后端**：Node.js + Express
- **状态管理**：Pinia
- **样式**：CSS 变量 + 响应式设计

## 快速开始

### 1. 安装依赖

#### 后端
```bash
cd backend
npm install
```

#### 前端
```bash
cd frontend
npm install
```

### 2. 启动服务

#### 后端
```bash
cd backend
node index.js
```
后端服务将运行在 `http://localhost:3001`

#### 前端
```bash
cd frontend
npm run dev
```
前端应用将运行在 `http://localhost:5173`

### 3. 登录
- 默认用户名：admin
- 默认密码：password123

## 使用指南

### 上传图片
1. 在左侧图片库中，点击或拖放图片到上传区域
2. 等待图片上传完成
3. 点击图片缩略图将其加载到画布

### 使用辅助线
1. 在画布顶部的控制面板中，勾选 "Guides"
2. 使用滑块调整辅助线粒度
3. 辅助线将实时显示在画布上

### 使用定点功能
1. 在画布顶部的控制面板中，勾选 "Points"
2. 点击画布上的任意位置添加点
3. 点会显示坐标和百分比占比
4. 可以选择点进行删除

### 使用黑白模式
1. 在画布顶部的控制面板中，勾选 "Black & White"
2. 使用滑块调整明暗度
3. 图片将实时显示为黑白效果

### 使用黑白灰区块
1. 在画布顶部的控制面板中，勾选 "Blocks"
2. 使用滑块调整区块大小和阈值
3. 图片将实时显示为黑白灰区块效果

### 使用截图功能
1. 在画布顶部的控制面板中，点击 "Take Screenshot"
2. 截图将添加到截图列表中
3. 点击截图缩略图可以查看和管理截图

### 切换深色模式
1. 在顶部导航栏中，点击主题切换按钮（☀️/🌙）
2. 应用将切换到深色或浅色模式

## 键盘快捷键

- **Ctrl/Cmd + S**：保存（占位功能）
- **Ctrl/Cmd + Z**：撤销（占位功能）
- **Ctrl/Cmd + Y**：重做（占位功能）

## 项目结构

```
strokeBase/
├── backend/           # 后端服务
│   ├── index.js       # 主服务器文件
│   └── package.json   # 后端依赖
├── frontend/          # 前端应用
│   ├── src/
│   │   ├── components/  # 组件
│   │   │   ├── Canvas.vue       # 画布组件
│   │   │   └── ImageLibrary.vue # 图片库组件
│   │   ├── stores/     # 状态管理
│   │   │   ├── auth.ts      # 认证状态
│   │   │   └── images.ts    # 图片状态
│   │   ├── services/   # API 服务
│   │   │   └── api.ts       # API 调用
│   │   ├── App.vue     # 主应用组件
│   │   ├── main.ts     # 应用入口
│   │   └── style.css   # 全局样式
│   └── package.json    # 前端依赖
└── README.md          # 项目文档
```

## 常见问题

### 1. 图片上传失败
- 确保图片格式正确（支持所有常见图片格式）
- 确保后端服务正在运行
- 检查网络连接

### 2. 画布操作卡顿
- 尝试减小图片大小
- 关闭不必要的辅助功能
- 确保浏览器性能良好

### 3. 深色模式不生效
- 确保浏览器支持深色模式
- 尝试刷新页面
- 检查系统深色模式设置

## 许可证

MIT License