feat: K线点位标注工具完整实现与Ubuntu PM2部署
纯前端 Canvas 画线、拖拽、导出；Python venv + PM2 静态服务； 含部署脚本与使用/部署文档。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -0,0 +1,8 @@
|
|||||||
|
venv/
|
||||||
|
__pycache__/
|
||||||
|
*.pyc
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
node_modules/
|
||||||
|
.pm2/
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
# K线点位标注工具（Web 版）
|
||||||
|
|
||||||
|
纯前端 K 线截图标注工具：在浏览器本地完成图片上传、水平价位线绘制、拖拽调整与导出，**数据不上传外网**。
|
||||||
|
|
||||||
|
## 功能概览
|
||||||
|
|
||||||
|
| 功能 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| 图片上传 | 点击选择 / 拖拽，支持 JPG、PNG |
|
||||||
|
| 三种标注线 | 入场（绿）、出场（蓝）、止损（红） |
|
||||||
|
| 画线 | 选中模式后单击生成贯穿画布的水平线 |
|
||||||
|
| 拖拽 | 鼠标悬停线条变为上下调整光标，可拖动改价 |
|
||||||
|
| 撤销 / 清空 | 删除最后一条或全部线条 |
|
||||||
|
| 导出 | 下载「原图 + 标注」合并 PNG |
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- HTML + CSS + JavaScript + Canvas
|
||||||
|
- 部署：Ubuntu + Python 虚拟环境 + PM2 + `http.server`
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
chart-label-tool/
|
||||||
|
├── public/ # 静态站点（对外服务目录）
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── css/style.css
|
||||||
|
│ └── js/app.js
|
||||||
|
├── deploy/
|
||||||
|
│ ├── install.sh # 一键部署脚本
|
||||||
|
│ └── ecosystem.config.cjs # PM2 配置
|
||||||
|
├── docs/
|
||||||
|
│ ├── DEPLOY.md # 部署文档
|
||||||
|
│ └── USAGE.md # 使用说明
|
||||||
|
└── requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
## 快速开始（本地开发）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd public
|
||||||
|
python3 -m http.server 8080
|
||||||
|
```
|
||||||
|
|
||||||
|
浏览器访问：<http://localhost:8080>
|
||||||
|
|
||||||
|
## 服务器部署（Ubuntu / 局域网）
|
||||||
|
|
||||||
|
详见 [docs/DEPLOY.md](docs/DEPLOY.md)。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo git clone https://git.bz121.com/dekun/chart-label-tool.git /opt/chart-label-tool
|
||||||
|
cd /opt/chart-label-tool
|
||||||
|
sudo bash deploy/install.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
局域网访问：`http://<服务器IP>:8080`
|
||||||
|
|
||||||
|
## 使用说明
|
||||||
|
|
||||||
|
详见 [docs/USAGE.md](docs/USAGE.md)。
|
||||||
|
|
||||||
|
## 仓库地址
|
||||||
|
|
||||||
|
<https://git.bz121.com/dekun/chart-label-tool.git>
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
仅供内部 / 个人使用，按需自行调整。
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
/**
|
||||||
|
* PM2 进程配置
|
||||||
|
* 使用 Python 虚拟环境中的 http.server 提供静态文件服务
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
apps: [
|
||||||
|
{
|
||||||
|
name: "chart-label-tool",
|
||||||
|
cwd: "/opt/chart-label-tool",
|
||||||
|
script: "/opt/chart-label-tool/venv/bin/python",
|
||||||
|
args: "-m http.server 8080 --bind 0.0.0.0 --directory /opt/chart-label-tool/public",
|
||||||
|
interpreter: "none",
|
||||||
|
autorestart: true,
|
||||||
|
watch: false,
|
||||||
|
max_memory_restart: "128M",
|
||||||
|
env: {
|
||||||
|
PYTHONUNBUFFERED: "1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# K线点位标注工具 - Ubuntu 一键部署脚本
|
||||||
|
# 用法: sudo bash deploy/install.sh
|
||||||
|
# 部署目录: /opt/chart-label-tool
|
||||||
|
|
||||||
|
set -euo pipefail
|
||||||
|
|
||||||
|
APP_DIR="/opt/chart-label-tool"
|
||||||
|
REPO_URL="https://git.bz121.com/dekun/chart-label-tool.git"
|
||||||
|
PORT=8080
|
||||||
|
SERVICE_USER="root"
|
||||||
|
|
||||||
|
echo "==> K线点位标注工具 部署开始"
|
||||||
|
|
||||||
|
if [[ "$(id -u)" -ne 0 ]]; then
|
||||||
|
echo "请使用 root 运行: sudo bash deploy/install.sh"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 依赖
|
||||||
|
apt-get update -qq
|
||||||
|
apt-get install -y -qq git python3 python3-venv python3-pip curl
|
||||||
|
|
||||||
|
# Node.js + PM2（若未安装）
|
||||||
|
if ! command -v pm2 &>/dev/null; then
|
||||||
|
if ! command -v node &>/dev/null; then
|
||||||
|
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
|
||||||
|
apt-get install -y -qq nodejs
|
||||||
|
fi
|
||||||
|
npm install -g pm2
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 拉取代码
|
||||||
|
if [[ -d "$APP_DIR/.git" ]]; then
|
||||||
|
echo "==> 更新已有仓库 $APP_DIR"
|
||||||
|
cd "$APP_DIR"
|
||||||
|
git pull --ff-only origin main || git pull --ff-only
|
||||||
|
else
|
||||||
|
echo "==> 克隆仓库到 $APP_DIR"
|
||||||
|
git clone "$REPO_URL" "$APP_DIR"
|
||||||
|
cd "$APP_DIR"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Python 虚拟环境
|
||||||
|
if [[ ! -d "$APP_DIR/venv" ]]; then
|
||||||
|
echo "==> 创建 Python 虚拟环境"
|
||||||
|
python3 -m venv "$APP_DIR/venv"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# PM2 启动/重载
|
||||||
|
echo "==> 配置 PM2 守护进程"
|
||||||
|
pm2 delete chart-label-tool 2>/dev/null || true
|
||||||
|
pm2 start "$APP_DIR/deploy/ecosystem.config.cjs"
|
||||||
|
pm2 save
|
||||||
|
pm2 startup systemd -u "$SERVICE_USER" --hp "/root" 2>/dev/null || pm2 startup
|
||||||
|
|
||||||
|
# 防火墙提示（可选）
|
||||||
|
if command -v ufw &>/dev/null && ufw status | grep -q "Status: active"; then
|
||||||
|
ufw allow "$PORT/tcp" 2>/dev/null || true
|
||||||
|
echo "==> 已尝试放行 UFW 端口 $PORT"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=========================================="
|
||||||
|
echo " 部署完成"
|
||||||
|
echo " 访问地址: http://<服务器局域网IP>:$PORT"
|
||||||
|
echo " 应用目录: $APP_DIR"
|
||||||
|
echo " 查看状态: pm2 status"
|
||||||
|
echo " 查看日志: pm2 logs chart-label-tool"
|
||||||
|
echo "=========================================="
|
||||||
+180
@@ -0,0 +1,180 @@
|
|||||||
|
# 部署文档
|
||||||
|
|
||||||
|
本文说明如何在 **Ubuntu** 服务器上将 K 线点位标注工具部署到 **`/opt/chart-label-tool`**，使用 **Python 虚拟环境** 托管静态文件，并由 **PM2** 守护进程，在 **局域网** 内访问。
|
||||||
|
|
||||||
|
## 环境要求
|
||||||
|
|
||||||
|
| 项目 | 要求 |
|
||||||
|
|------|------|
|
||||||
|
| 操作系统 | Ubuntu 20.04 / 22.04 / 24.04（推荐） |
|
||||||
|
| 权限 | root 或 sudo |
|
||||||
|
| 网络 | 可访问 git 仓库；客户端与服务器在同一局域网 |
|
||||||
|
| 浏览器 | Chrome / Edge 等现代浏览器 |
|
||||||
|
|
||||||
|
## 架构说明
|
||||||
|
|
||||||
|
```
|
||||||
|
浏览器 (局域网)
|
||||||
|
↓ HTTP :8080
|
||||||
|
PM2 → Python venv → http.server
|
||||||
|
↓ 静态文件
|
||||||
|
/opt/chart-label-tool/public/
|
||||||
|
```
|
||||||
|
|
||||||
|
- 无后端业务逻辑，仅静态资源服务
|
||||||
|
- 标注数据全部在用户浏览器内存中处理，不上传服务器
|
||||||
|
|
||||||
|
## 方式一：一键部署（推荐）
|
||||||
|
|
||||||
|
在**已能访问 Git 仓库**的 Ubuntu 机器上执行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 若目录不存在，先克隆
|
||||||
|
sudo git clone https://git.bz121.com/dekun/chart-label-tool.git /opt/chart-label-tool
|
||||||
|
|
||||||
|
cd /opt/chart-label-tool
|
||||||
|
sudo bash deploy/install.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
脚本将自动完成：
|
||||||
|
|
||||||
|
1. 安装 `git`、`python3`、`python3-venv`
|
||||||
|
2. 安装 Node.js 与 PM2（若未安装）
|
||||||
|
3. 克隆/更新代码到 `/opt/chart-label-tool`
|
||||||
|
4. 创建 Python 虚拟环境 `venv/`
|
||||||
|
5. 使用 PM2 启动 `chart-label-tool` 进程（监听 `0.0.0.0:8080`）
|
||||||
|
6. 执行 `pm2 save` 与 `pm2 startup`（开机自启）
|
||||||
|
|
||||||
|
部署成功后，在局域网内任意电脑浏览器访问：
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://<服务器局域网IP>:8080
|
||||||
|
```
|
||||||
|
|
||||||
|
查看本机 IP：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
hostname -I
|
||||||
|
# 或
|
||||||
|
ip addr show | grep "inet "
|
||||||
|
```
|
||||||
|
|
||||||
|
## 方式二：手动部署
|
||||||
|
|
||||||
|
### 1. 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo apt-get update
|
||||||
|
sudo apt-get install -y git python3 python3-venv curl
|
||||||
|
|
||||||
|
# 安装 Node.js 20 与 PM2
|
||||||
|
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
||||||
|
sudo apt-get install -y nodejs
|
||||||
|
sudo npm install -g pm2
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 克隆项目
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo mkdir -p /opt
|
||||||
|
sudo git clone https://git.bz121.com/dekun/chart-label-tool.git /opt/chart-label-tool
|
||||||
|
cd /opt/chart-label-tool
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 创建虚拟环境
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo python3 -m venv /opt/chart-label-tool/venv
|
||||||
|
```
|
||||||
|
|
||||||
|
> 本项目不依赖第三方 pip 包，`http.server` 来自 Python 标准库。
|
||||||
|
|
||||||
|
### 4. 启动 PM2
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /opt/chart-label-tool
|
||||||
|
sudo pm2 start deploy/ecosystem.config.cjs
|
||||||
|
sudo pm2 save
|
||||||
|
sudo pm2 startup
|
||||||
|
```
|
||||||
|
|
||||||
|
按 `pm2 startup` 提示执行生成的 `sudo env PATH=...` 命令。
|
||||||
|
|
||||||
|
### 5. 验证
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pm2 status
|
||||||
|
curl -I http://127.0.0.1:8080
|
||||||
|
```
|
||||||
|
|
||||||
|
浏览器打开 `http://<服务器IP>:8080`，应能看到标注工具页面。
|
||||||
|
|
||||||
|
## 防火墙
|
||||||
|
|
||||||
|
若启用了 UFW，需放行 8080 端口：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo ufw allow 8080/tcp
|
||||||
|
sudo ufw reload
|
||||||
|
```
|
||||||
|
|
||||||
|
## 常用运维命令
|
||||||
|
|
||||||
|
| 操作 | 命令 |
|
||||||
|
|------|------|
|
||||||
|
| 查看状态 | `pm2 status` |
|
||||||
|
| 查看日志 | `pm2 logs chart-label-tool` |
|
||||||
|
| 重启服务 | `pm2 restart chart-label-tool` |
|
||||||
|
| 停止服务 | `pm2 stop chart-label-tool` |
|
||||||
|
| 更新代码 | `cd /opt/chart-label-tool && sudo git pull && sudo pm2 restart chart-label-tool` |
|
||||||
|
|
||||||
|
## 修改端口
|
||||||
|
|
||||||
|
编辑 `deploy/ecosystem.config.cjs` 中 `args` 里的端口号，例如改为 `9000`：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
args: "-m http.server 9000 --bind 0.0.0.0 --directory /opt/chart-label-tool/public",
|
||||||
|
```
|
||||||
|
|
||||||
|
然后执行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pm2 restart chart-label-tool
|
||||||
|
```
|
||||||
|
|
||||||
|
## 故障排查
|
||||||
|
|
||||||
|
### 页面无法打开
|
||||||
|
|
||||||
|
1. `pm2 status` 确认进程为 `online`
|
||||||
|
2. `ss -tlnp | grep 8080` 确认端口在监听
|
||||||
|
3. 检查服务器与客户端是否同一局域网
|
||||||
|
4. 检查防火墙是否放行 8080
|
||||||
|
|
||||||
|
### PM2 启动失败
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pm2 logs chart-label-tool --lines 50
|
||||||
|
```
|
||||||
|
|
||||||
|
确认虚拟环境存在：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ls -la /opt/chart-label-tool/venv/bin/python
|
||||||
|
```
|
||||||
|
|
||||||
|
手动测试：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/opt/chart-label-tool/venv/bin/python -m http.server 8080 --bind 0.0.0.0 --directory /opt/chart-label-tool/public
|
||||||
|
```
|
||||||
|
|
||||||
|
### Git 拉取失败
|
||||||
|
|
||||||
|
检查仓库地址与凭据，或先在能访问的机器上打包上传到服务器。
|
||||||
|
|
||||||
|
## 安全说明
|
||||||
|
|
||||||
|
- 本工具为**内网静态站点**，请勿直接暴露到公网
|
||||||
|
- 用户标注数据不经过服务器存储；服务器仅提供 HTML/JS/CSS 文件
|
||||||
|
- 若需 HTTPS，可在前方增加 Nginx 反向代理并配置证书
|
||||||
+105
@@ -0,0 +1,105 @@
|
|||||||
|
# 使用说明
|
||||||
|
|
||||||
|
## 访问地址
|
||||||
|
|
||||||
|
- **局域网部署**：`http://<服务器IP>:8080`
|
||||||
|
- **本机调试**：`http://localhost:8080`
|
||||||
|
|
||||||
|
推荐使用 **Chrome** 或 **Edge** 浏览器。
|
||||||
|
|
||||||
|
## 界面布局
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────┐
|
||||||
|
│ 顶部工具栏：上传 | 模式 | 撤销 | 清空 | 下载 │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ K 线截图 + 标注画布区域 │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ 底部图例：入场 / 出场 / 止损 颜色说明 │
|
||||||
|
└─────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 操作步骤
|
||||||
|
|
||||||
|
### 1. 上传 K 线截图
|
||||||
|
|
||||||
|
两种方式任选：
|
||||||
|
|
||||||
|
- 点击顶部 **「上传图片」**，选择本地 JPG / PNG 文件
|
||||||
|
- 将图片 **拖拽** 到中间虚线框区域
|
||||||
|
|
||||||
|
上传后图片会按比例适应显示区域，**不会拉伸变形**。
|
||||||
|
|
||||||
|
> **注意**：上传新图片会自动 **清空上一轮所有标注线条**。
|
||||||
|
|
||||||
|
### 2. 选择标注模式
|
||||||
|
|
||||||
|
顶部三个模式按钮：
|
||||||
|
|
||||||
|
| 按钮 | 线条颜色 | 用途示例 |
|
||||||
|
|------|----------|----------|
|
||||||
|
| 入场线 | 绿色 `#00ff00` | 标记买入/开仓价位 |
|
||||||
|
| 出场线 | 蓝色 `#0099ff` | 标记卖出/平仓价位 |
|
||||||
|
| 止损线 | 红色 `#ff3333` | 标记止损价位 |
|
||||||
|
|
||||||
|
当前选中的模式会高亮显示。
|
||||||
|
|
||||||
|
### 3. 绘制水平线
|
||||||
|
|
||||||
|
1. 先选中一种标注模式（如「入场线」）
|
||||||
|
2. 在 K 线图对应价位处 **单击鼠标左键**
|
||||||
|
3. 系统会在该高度绘制一条 **贯穿整张图的水平线**（线宽 3px）
|
||||||
|
|
||||||
|
可重复切换模式并单击，添加多条不同颜色的线。
|
||||||
|
|
||||||
|
### 4. 拖拽调整线条
|
||||||
|
|
||||||
|
- 将鼠标移到已有线条附近，光标变为 **上下箭头**（`ns-resize`），表示可拖拽
|
||||||
|
- **按住左键** 上下拖动，即可调整该线价位
|
||||||
|
- 松开鼠标完成调整
|
||||||
|
|
||||||
|
### 5. 撤销与清空
|
||||||
|
|
||||||
|
| 按钮 | 作用 |
|
||||||
|
|------|------|
|
||||||
|
| 撤销 | 删除 **最后绘制** 的一条线 |
|
||||||
|
| 清空全部 | 删除当前图片上的 **所有** 标注线（需确认） |
|
||||||
|
|
||||||
|
无线条时这两个按钮为灰色不可用。
|
||||||
|
|
||||||
|
### 6. 下载标注图
|
||||||
|
|
||||||
|
点击 **「下载标注图」**，浏览器会将 **原始分辨率图片 + 所有标注线** 合并为一张 PNG 并保存到本地。
|
||||||
|
|
||||||
|
文件名示例：`kline-label-20260527-143052.png`
|
||||||
|
|
||||||
|
> 导出使用原图像素尺寸，保证清晰度；线条位置会按显示比例自动换算到原图坐标。
|
||||||
|
|
||||||
|
## 隐私说明
|
||||||
|
|
||||||
|
- 所有图片与标注均在 **本机浏览器** 内处理
|
||||||
|
- **不会上传到互联网或服务器**（服务器仅提供页面静态文件）
|
||||||
|
- 关闭或刷新页面后，未导出的标注将丢失，请及时下载保存
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
**Q：为什么单击没有画线？**
|
||||||
|
A：请先上传图片，并确认已选中一种标注模式（入场/出场/止损）。
|
||||||
|
|
||||||
|
**Q：画线位置不准？**
|
||||||
|
A：请确保在图片区域内单击；导出时会按原图比例校正坐标。
|
||||||
|
|
||||||
|
**Q：拖拽时误加了新线？**
|
||||||
|
A：从线条上按下并拖动即可；仅在空白处单击才会新增线条。
|
||||||
|
|
||||||
|
**Q：支持哪些图片格式？**
|
||||||
|
A：JPG、JPEG、PNG。
|
||||||
|
|
||||||
|
**Q：换了一张图，之前的线还在吗？**
|
||||||
|
A：上传新图会自动清空所有旧标注。
|
||||||
|
|
||||||
|
## 快捷键
|
||||||
|
|
||||||
|
当前版本未定义键盘快捷键，全部通过鼠标与顶部按钮操作。
|
||||||
@@ -0,0 +1,275 @@
|
|||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #1a1a1a;
|
||||||
|
--bg-panel: #252525;
|
||||||
|
--bg-hover: #333;
|
||||||
|
--border: #3a3a3a;
|
||||||
|
--text: #f0f0f0;
|
||||||
|
--text-muted: #999;
|
||||||
|
--accent: #4a9eff;
|
||||||
|
--entry: #00ff00;
|
||||||
|
--exit: #0099ff;
|
||||||
|
--stop: #ff3333;
|
||||||
|
--line-width: 3px;
|
||||||
|
--hit-tolerance: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
background: var(--bg-panel);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 12px 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-hint {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 7px 14px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s, border-color 0.15s;
|
||||||
|
user-select: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover:not(:disabled) {
|
||||||
|
background: #404040;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #2d4a3e;
|
||||||
|
border-color: #3d6b55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: #3a5c4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent {
|
||||||
|
background: #1e3a5f;
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent:hover:not(:disabled) {
|
||||||
|
background: #264d7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-group {
|
||||||
|
display: inline-flex;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-btn {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-btn:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-btn.active[data-mode="entry"] {
|
||||||
|
background: rgba(0, 255, 0, 0.15);
|
||||||
|
color: var(--entry);
|
||||||
|
box-shadow: inset 0 -2px 0 var(--entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-btn.active[data-mode="exit"] {
|
||||||
|
background: rgba(0, 153, 255, 0.15);
|
||||||
|
color: var(--exit);
|
||||||
|
box-shadow: inset 0 -2px 0 var(--exit);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-btn.active[data-mode="stop"] {
|
||||||
|
background: rgba(255, 51, 51, 0.15);
|
||||||
|
color: var(--stop);
|
||||||
|
box-shadow: inset 0 -2px 0 var(--stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
overflow: auto;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-zone {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
min-height: 400px;
|
||||||
|
border: 2px dashed var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: border-color 0.2s, background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-zone.drag-over {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background: rgba(74, 158, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-placeholder {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-sub {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-wrap {
|
||||||
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-wrap.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chart-image {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay-canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay-canvas.can-drag {
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
background: var(--bg-panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 3px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 4px;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend.entry {
|
||||||
|
background: var(--entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend.exit {
|
||||||
|
background: var(--exit);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend.stop {
|
||||||
|
background: var(--stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-note {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.toolbar-actions {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-note {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>K线点位标注工具</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="toolbar">
|
||||||
|
<h1 class="toolbar-title">K线点位标注工具</h1>
|
||||||
|
<div class="toolbar-actions">
|
||||||
|
<label class="btn btn-primary" for="file-input" title="支持 JPG / PNG">
|
||||||
|
上传图片
|
||||||
|
<input type="file" id="file-input" accept="image/jpeg,image/png,.jpg,.jpeg,.png" hidden>
|
||||||
|
</label>
|
||||||
|
<div class="mode-group" role="group" aria-label="标注模式">
|
||||||
|
<button type="button" class="btn mode-btn active" data-mode="entry">入场线</button>
|
||||||
|
<button type="button" class="btn mode-btn" data-mode="exit">出场线</button>
|
||||||
|
<button type="button" class="btn mode-btn" data-mode="stop">止损线</button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn" id="btn-undo" disabled>撤销</button>
|
||||||
|
<button type="button" class="btn" id="btn-clear" disabled>清空全部</button>
|
||||||
|
<button type="button" class="btn btn-accent" id="btn-download" disabled>下载标注图</button>
|
||||||
|
</div>
|
||||||
|
<p class="toolbar-hint" id="status-hint">请上传 K 线截图（JPG / PNG），支持点击或拖拽</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="workspace">
|
||||||
|
<div class="drop-zone" id="drop-zone">
|
||||||
|
<div class="drop-placeholder" id="drop-placeholder">
|
||||||
|
<span class="drop-icon">📈</span>
|
||||||
|
<p>将 K 线截图拖拽到此处，或点击顶部「上传图片」</p>
|
||||||
|
<p class="drop-sub">支持 JPG、PNG，数据仅在浏览器本地处理</p>
|
||||||
|
</div>
|
||||||
|
<div class="canvas-wrap hidden" id="canvas-wrap">
|
||||||
|
<img id="chart-image" alt="K线图" draggable="false">
|
||||||
|
<canvas id="overlay-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<span>入场 <i class="legend entry"></i></span>
|
||||||
|
<span>出场 <i class="legend exit"></i></span>
|
||||||
|
<span>止损 <i class="legend stop"></i></span>
|
||||||
|
<span class="footer-note">单击添加水平线 · 拖拽调整位置</span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,327 @@
|
|||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const LINE_TYPES = {
|
||||||
|
entry: { label: "入场线", color: "#00ff00" },
|
||||||
|
exit: { label: "出场线", color: "#0099ff" },
|
||||||
|
stop: { label: "止损线", color: "#ff3333" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const LINE_WIDTH = 3;
|
||||||
|
const HIT_TOLERANCE = 8;
|
||||||
|
|
||||||
|
const fileInput = document.getElementById("file-input");
|
||||||
|
const dropZone = document.getElementById("drop-zone");
|
||||||
|
const dropPlaceholder = document.getElementById("drop-placeholder");
|
||||||
|
const canvasWrap = document.getElementById("canvas-wrap");
|
||||||
|
const chartImage = document.getElementById("chart-image");
|
||||||
|
const canvas = document.getElementById("overlay-canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const btnUndo = document.getElementById("btn-undo");
|
||||||
|
const btnClear = document.getElementById("btn-clear");
|
||||||
|
const btnDownload = document.getElementById("btn-download");
|
||||||
|
const statusHint = document.getElementById("status-hint");
|
||||||
|
const modeButtons = document.querySelectorAll(".mode-btn");
|
||||||
|
|
||||||
|
let currentMode = "entry";
|
||||||
|
let lines = [];
|
||||||
|
let displayWidth = 0;
|
||||||
|
let displayHeight = 0;
|
||||||
|
let imageLoaded = false;
|
||||||
|
let dragIndex = -1;
|
||||||
|
let isDragging = false;
|
||||||
|
let didDragMove = false;
|
||||||
|
|
||||||
|
function setHint(text) {
|
||||||
|
statusHint.textContent = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateButtons() {
|
||||||
|
const hasImage = imageLoaded;
|
||||||
|
const hasLines = lines.length > 0;
|
||||||
|
btnUndo.disabled = !hasImage || !hasLines;
|
||||||
|
btnClear.disabled = !hasImage || !hasLines;
|
||||||
|
btnDownload.disabled = !hasImage;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCanvasPoint(event) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const scaleX = canvas.width / rect.width;
|
||||||
|
const scaleY = canvas.height / rect.height;
|
||||||
|
return {
|
||||||
|
x: (event.clientX - rect.left) * scaleX,
|
||||||
|
y: (event.clientY - rect.top) * scaleY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function findLineAtY(y) {
|
||||||
|
for (let i = lines.length - 1; i >= 0; i--) {
|
||||||
|
if (Math.abs(lines[i].y - y) <= HIT_TOLERANCE) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function redraw() {
|
||||||
|
if (!imageLoaded) return;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
for (const line of lines) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = line.color;
|
||||||
|
ctx.lineWidth = LINE_WIDTH;
|
||||||
|
ctx.moveTo(0, line.y);
|
||||||
|
ctx.lineTo(canvas.width, line.y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncCanvasSize() {
|
||||||
|
displayWidth = chartImage.offsetWidth;
|
||||||
|
displayHeight = chartImage.offsetHeight;
|
||||||
|
canvas.width = Math.round(displayWidth);
|
||||||
|
canvas.height = Math.round(displayHeight);
|
||||||
|
canvas.style.width = displayWidth + "px";
|
||||||
|
canvas.style.height = displayHeight + "px";
|
||||||
|
redraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAnnotations() {
|
||||||
|
lines = [];
|
||||||
|
dragIndex = -1;
|
||||||
|
isDragging = false;
|
||||||
|
redraw();
|
||||||
|
updateButtons();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadImageFile(file) {
|
||||||
|
if (!file) return;
|
||||||
|
const validTypes = ["image/jpeg", "image/png"];
|
||||||
|
const ext = file.name.split(".").pop().toLowerCase();
|
||||||
|
const validExt = ["jpg", "jpeg", "png"].includes(ext);
|
||||||
|
if (!validTypes.includes(file.type) && !validExt) {
|
||||||
|
setHint("仅支持 JPG / PNG 格式");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function (e) {
|
||||||
|
chartImage.onload = function () {
|
||||||
|
imageLoaded = true;
|
||||||
|
dropPlaceholder.classList.add("hidden");
|
||||||
|
canvasWrap.classList.remove("hidden");
|
||||||
|
dropZone.classList.remove("drag-over");
|
||||||
|
clearAnnotations();
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
syncCanvasSize();
|
||||||
|
setHint(
|
||||||
|
"当前模式：" +
|
||||||
|
LINE_TYPES[currentMode].label +
|
||||||
|
" — 在图上单击添加水平线，可拖拽调整"
|
||||||
|
);
|
||||||
|
updateButtons();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
chartImage.onerror = function () {
|
||||||
|
setHint("图片加载失败，请换一张重试");
|
||||||
|
imageLoaded = false;
|
||||||
|
updateButtons();
|
||||||
|
};
|
||||||
|
chartImage.src = e.target.result;
|
||||||
|
};
|
||||||
|
reader.onerror = function () {
|
||||||
|
setHint("文件读取失败");
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addLine(y) {
|
||||||
|
const type = currentMode;
|
||||||
|
const info = LINE_TYPES[type];
|
||||||
|
lines.push({ y: y, type: type, color: info.color });
|
||||||
|
redraw();
|
||||||
|
updateButtons();
|
||||||
|
setHint(
|
||||||
|
"已添加 " +
|
||||||
|
info.label +
|
||||||
|
"（共 " +
|
||||||
|
lines.length +
|
||||||
|
" 条）— 当前模式：" +
|
||||||
|
info.label
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportImage() {
|
||||||
|
if (!imageLoaded) return;
|
||||||
|
|
||||||
|
const natW = chartImage.naturalWidth;
|
||||||
|
const natH = chartImage.naturalHeight;
|
||||||
|
const scaleY = natH / displayHeight;
|
||||||
|
|
||||||
|
const exportCanvas = document.createElement("canvas");
|
||||||
|
exportCanvas.width = natW;
|
||||||
|
exportCanvas.height = natH;
|
||||||
|
const exCtx = exportCanvas.getContext("2d");
|
||||||
|
|
||||||
|
exCtx.drawImage(chartImage, 0, 0, natW, natH);
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
const y = line.y * scaleY;
|
||||||
|
exCtx.beginPath();
|
||||||
|
exCtx.strokeStyle = line.color;
|
||||||
|
exCtx.lineWidth = LINE_WIDTH;
|
||||||
|
exCtx.moveTo(0, y);
|
||||||
|
exCtx.lineTo(natW, y);
|
||||||
|
exCtx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
exportCanvas.toBlob(function (blob) {
|
||||||
|
if (!blob) {
|
||||||
|
setHint("导出失败，请重试");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
const ts = new Date();
|
||||||
|
const pad = (n) => String(n).padStart(2, "0");
|
||||||
|
const name =
|
||||||
|
"kline-label-" +
|
||||||
|
ts.getFullYear() +
|
||||||
|
pad(ts.getMonth() + 1) +
|
||||||
|
pad(ts.getDate()) +
|
||||||
|
"-" +
|
||||||
|
pad(ts.getHours()) +
|
||||||
|
pad(ts.getMinutes()) +
|
||||||
|
pad(ts.getSeconds()) +
|
||||||
|
".png";
|
||||||
|
a.href = url;
|
||||||
|
a.download = name;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
setHint("标注图已下载：" + name);
|
||||||
|
}, "image/png");
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCursor(y) {
|
||||||
|
const idx = findLineAtY(y);
|
||||||
|
if (idx >= 0) {
|
||||||
|
canvas.classList.add("can-drag");
|
||||||
|
} else {
|
||||||
|
canvas.classList.remove("can-drag");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
modeButtons.forEach(function (btn) {
|
||||||
|
btn.addEventListener("click", function () {
|
||||||
|
modeButtons.forEach(function (b) {
|
||||||
|
b.classList.remove("active");
|
||||||
|
});
|
||||||
|
btn.classList.add("active");
|
||||||
|
currentMode = btn.dataset.mode;
|
||||||
|
if (imageLoaded) {
|
||||||
|
setHint("当前模式：" + LINE_TYPES[currentMode].label + " — 单击添加水平线");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fileInput.addEventListener("change", function () {
|
||||||
|
const file = fileInput.files[0];
|
||||||
|
loadImageFile(file);
|
||||||
|
fileInput.value = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
dropZone.addEventListener("dragover", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
dropZone.classList.add("drag-over");
|
||||||
|
});
|
||||||
|
|
||||||
|
dropZone.addEventListener("dragleave", function (e) {
|
||||||
|
if (!dropZone.contains(e.relatedTarget)) {
|
||||||
|
dropZone.classList.remove("drag-over");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dropZone.addEventListener("drop", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
dropZone.classList.remove("drag-over");
|
||||||
|
const file = e.dataTransfer.files[0];
|
||||||
|
loadImageFile(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mousedown", function (e) {
|
||||||
|
if (!imageLoaded) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const pt = getCanvasPoint(e);
|
||||||
|
const idx = findLineAtY(pt.y);
|
||||||
|
if (idx >= 0) {
|
||||||
|
dragIndex = idx;
|
||||||
|
isDragging = true;
|
||||||
|
didDragMove = false;
|
||||||
|
canvas.classList.add("can-drag");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mousemove", function (e) {
|
||||||
|
if (!imageLoaded) return;
|
||||||
|
const pt = getCanvasPoint(e);
|
||||||
|
|
||||||
|
if (isDragging && dragIndex >= 0) {
|
||||||
|
didDragMove = true;
|
||||||
|
lines[dragIndex].y = Math.max(0, Math.min(canvas.height, pt.y));
|
||||||
|
redraw();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCursor(pt.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mouseup", function () {
|
||||||
|
isDragging = false;
|
||||||
|
dragIndex = -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("mouseleave", function () {
|
||||||
|
isDragging = false;
|
||||||
|
dragIndex = -1;
|
||||||
|
canvas.classList.remove("can-drag");
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("click", function (e) {
|
||||||
|
if (!imageLoaded || didDragMove) return;
|
||||||
|
const pt = getCanvasPoint(e);
|
||||||
|
if (findLineAtY(pt.y) >= 0) return;
|
||||||
|
addLine(pt.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
btnUndo.addEventListener("click", function () {
|
||||||
|
if (lines.length === 0) return;
|
||||||
|
lines.pop();
|
||||||
|
redraw();
|
||||||
|
updateButtons();
|
||||||
|
setHint(
|
||||||
|
lines.length
|
||||||
|
? "已撤销最后一条，剩余 " + lines.length + " 条"
|
||||||
|
: "已撤销全部线条"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
btnClear.addEventListener("click", function () {
|
||||||
|
if (lines.length === 0) return;
|
||||||
|
if (!confirm("确定清空所有标注线条？")) return;
|
||||||
|
clearAnnotations();
|
||||||
|
setHint("已清空全部标注");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnDownload.addEventListener("click", exportImage);
|
||||||
|
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
if (imageLoaded) {
|
||||||
|
syncCanvasSize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dropPlaceholder.classList.remove("hidden");
|
||||||
|
updateButtons();
|
||||||
|
})();
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
# 本项目静态资源由 Python 标准库 http.server 托管，无需额外 pip 依赖。
|
||||||
|
# 虚拟环境仅用于与系统 Python 隔离，便于 PM2 指定解释器路径。
|
||||||
Reference in New Issue
Block a user