dekun/chart-label-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
dekun
2026-05-27 14:41:13 +08:00
parent dc1b4989b4
commit 518e517150
3 changed files with 495 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+35 -7
View File
@@ -15,14 +15,40 @@
<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>
<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>
<div class="zoom-group" id="zoom-group" hidden>
<button type="button" class="btn btn-icon" id="zoom-out" title="缩小">−</button>
<span class="zoom-label" id="zoom-label">100%</span>
<button type="button" class="btn btn-icon" id="zoom-in" title="放大">+</button>
<button type="button" class="btn" id="zoom-fit" title="适应窗口">适应</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>
<div class="toolbar-row direction-row" id="direction-row" hidden>
<span class="row-label">箭头方向</span>
<div class="direction-pad" role="group" aria-label="箭头方向">
<button type="button" class="btn dir-btn" data-angle="315" title="左上">↖</button>
<button type="button" class="btn dir-btn active" data-angle="0" title="向上">↑</button>
<button type="button" class="btn dir-btn" data-angle="45" title="右上">↗</button>
<button type="button" class="btn dir-btn" data-angle="270" title="向左">←</button>
<span class="dir-center" id="dir-center" title="当前角度">0°</span>
<button type="button" class="btn dir-btn" data-angle="90" title="向右">→</button>
<button type="button" class="btn dir-btn" data-angle="225" title="左下">↙</button>
<button type="button" class="btn dir-btn" data-angle="180" title="向下">↓</button>
<button type="button" class="btn dir-btn" data-angle="135" title="右下">↘</button>
</div>
<label class="angle-slider-wrap">
<span>角度</span>
<input type="range" id="angle-slider" min="0" max="359" value="0" step="1">
<input type="number" id="angle-input" min="0" max="359" value="0" class="angle-input">
<span class="angle-unit">°</span>
</label>
</div>
<p class="toolbar-hint" id="status-hint">请上传 K 线截图（JPG / PNG），支持点击或拖拽</p>
</header>
@@ -33,9 +59,11 @@
<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 class="viewport hidden" id="viewport">
<div class="stage" id="stage">
<img id="chart-image" alt="K线图" draggable="false">
<canvas id="overlay-canvas"></canvas>
</div>
</div>
</div>
</main>
@@ -44,7 +72,7 @@
<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>
<span class="footer-note">滚轮缩放 · 右键拖动画布 · 方向面板/滑块设置箭头朝向</span>
</footer>
<script src="js/app.js"></script>