dekun
385 lines
11 KiB
JavaScript
385 lines
11 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
const MARKER_TYPES = {
|
|
entry: { label: "入场", color: "#00ff00", direction: "up" },
|
|
exit: { label: "出场", color: "#0099ff", direction: "down" },
|
|
stop: { label: "止损", color: "#ff3333", direction: "down" },
|
|
};
|
|
|
|
const ARROW_HEAD = 12;
|
|
const ARROW_STEM = 14;
|
|
const ARROW_WIDTH = 9;
|
|
const LINE_WIDTH = 2;
|
|
const HIT_RADIUS = 18;
|
|
|
|
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 markers = [];
|
|
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 hasMarkers = markers.length > 0;
|
|
btnUndo.disabled = !hasImage || !hasMarkers;
|
|
btnClear.disabled = !hasImage || !hasMarkers;
|
|
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 getMarkerDirection(type) {
|
|
return MARKER_TYPES[type].direction;
|
|
}
|
|
|
|
function dist(x1, y1, x2, y2) {
|
|
const dx = x1 - x2;
|
|
const dy = y1 - y2;
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
}
|
|
|
|
function findMarkerAt(x, y) {
|
|
for (let i = markers.length - 1; i >= 0; i--) {
|
|
if (dist(x, y, markers[i].x, markers[i].y) <= HIT_RADIUS) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function drawArrowMarker(targetCtx, x, y, type, color) {
|
|
const direction = getMarkerDirection(type);
|
|
const w = ARROW_WIDTH;
|
|
const h = ARROW_HEAD;
|
|
const stem = ARROW_STEM;
|
|
|
|
targetCtx.fillStyle = color;
|
|
targetCtx.strokeStyle = color;
|
|
targetCtx.lineWidth = LINE_WIDTH;
|
|
targetCtx.lineCap = "round";
|
|
targetCtx.lineJoin = "round";
|
|
|
|
if (direction === "up") {
|
|
targetCtx.beginPath();
|
|
targetCtx.moveTo(x, y);
|
|
targetCtx.lineTo(x - w, y + h);
|
|
targetCtx.lineTo(x + w, y + h);
|
|
targetCtx.closePath();
|
|
targetCtx.fill();
|
|
targetCtx.beginPath();
|
|
targetCtx.moveTo(x, y + h);
|
|
targetCtx.lineTo(x, y + h + stem);
|
|
targetCtx.stroke();
|
|
} else {
|
|
targetCtx.beginPath();
|
|
targetCtx.moveTo(x, y);
|
|
targetCtx.lineTo(x - w, y - h);
|
|
targetCtx.lineTo(x + w, y - h);
|
|
targetCtx.closePath();
|
|
targetCtx.fill();
|
|
targetCtx.beginPath();
|
|
targetCtx.moveTo(x, y - h);
|
|
targetCtx.lineTo(x, y - h - stem);
|
|
targetCtx.stroke();
|
|
}
|
|
}
|
|
|
|
function redraw() {
|
|
if (!imageLoaded) return;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for (const m of markers) {
|
|
drawArrowMarker(ctx, m.x, m.y, m.type, m.color);
|
|
}
|
|
}
|
|
|
|
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() {
|
|
markers = [];
|
|
dragIndex = -1;
|
|
isDragging = false;
|
|
didDragMove = 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(
|
|
"当前模式：" +
|
|
MARKER_TYPES[currentMode].label +
|
|
" — 在图上单击添加箭头标记，可拖拽调整"
|
|
);
|
|
updateButtons();
|
|
});
|
|
};
|
|
chartImage.onerror = function () {
|
|
setHint("图片加载失败，请换一张重试");
|
|
imageLoaded = false;
|
|
updateButtons();
|
|
};
|
|
chartImage.src = e.target.result;
|
|
};
|
|
reader.onerror = function () {
|
|
setHint("文件读取失败");
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
function addMarker(x, y) {
|
|
const type = currentMode;
|
|
const info = MARKER_TYPES[type];
|
|
markers.push({ x: x, y: y, type: type, color: info.color });
|
|
redraw();
|
|
updateButtons();
|
|
setHint(
|
|
"已添加 " +
|
|
info.label +
|
|
" 标记（共 " +
|
|
markers.length +
|
|
" 个）— 可切换模式继续标注"
|
|
);
|
|
}
|
|
|
|
function exportImage() {
|
|
if (!imageLoaded) return;
|
|
|
|
const natW = chartImage.naturalWidth;
|
|
const natH = chartImage.naturalHeight;
|
|
const scaleX = natW / displayWidth;
|
|
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 m of markers) {
|
|
drawArrowMarker(
|
|
exCtx,
|
|
m.x * scaleX,
|
|
m.y * scaleY,
|
|
m.type,
|
|
m.color
|
|
);
|
|
}
|
|
|
|
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(x, y) {
|
|
const idx = findMarkerAt(x, y);
|
|
if (idx >= 0) {
|
|
canvas.classList.add("can-drag");
|
|
} else {
|
|
canvas.classList.remove("can-drag");
|
|
}
|
|
}
|
|
|
|
modeButtons.forEach(function (btn) {
|
|
btn.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
modeButtons.forEach(function (b) {
|
|
b.classList.remove("active");
|
|
});
|
|
btn.classList.add("active");
|
|
currentMode = btn.dataset.mode;
|
|
didDragMove = false;
|
|
if (imageLoaded) {
|
|
setHint(
|
|
"当前模式：" +
|
|
MARKER_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 = findMarkerAt(pt.x, 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;
|
|
markers[dragIndex].x = Math.max(0, Math.min(canvas.width, pt.x));
|
|
markers[dragIndex].y = Math.max(0, Math.min(canvas.height, pt.y));
|
|
redraw();
|
|
return;
|
|
}
|
|
|
|
updateCursor(pt.x, 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) return;
|
|
if (didDragMove) {
|
|
didDragMove = false;
|
|
return;
|
|
}
|
|
const pt = getCanvasPoint(e);
|
|
if (findMarkerAt(pt.x, pt.y) >= 0) return;
|
|
addMarker(pt.x, pt.y);
|
|
});
|
|
|
|
btnUndo.addEventListener("click", function () {
|
|
if (markers.length === 0) return;
|
|
markers.pop();
|
|
redraw();
|
|
updateButtons();
|
|
setHint(
|
|
markers.length
|
|
? "已撤销最后一个标记，剩余 " + markers.length + " 个"
|
|
: "已撤销全部标记"
|
|
);
|
|
});
|
|
|
|
btnClear.addEventListener("click", function () {
|
|
if (markers.length === 0) return;
|
|
if (!confirm("确定清空所有标注？")) return;
|
|
clearAnnotations();
|
|
setHint("已清空全部标注");
|
|
});
|
|
|
|
btnDownload.addEventListener("click", exportImage);
|
|
|
|
window.addEventListener("resize", function () {
|
|
if (imageLoaded) {
|
|
syncCanvasSize();
|
|
}
|
|
});
|
|
|
|
dropPlaceholder.classList.remove("hidden");
|
|
updateButtons();
|
|
})();
|