From c9dd478bd7feaedcec074a93693b6fcfe4fb7870 Mon Sep 17 00:00:00 2001 From: Shuanglei Tao Date: Tue, 9 Sep 2025 21:03:05 +0800 Subject: [PATCH] update html --- html/css/main.css | 19 ++++++++++------ html/index.html | 3 +++ html/js/crop.js | 24 +++++++++------------ html/js/main.js | 4 ++++ html/js/paint.js | 55 ++++++++++++++++------------------------------- 5 files changed, 48 insertions(+), 57 deletions(-) diff --git a/html/css/main.css b/html/css/main.css index 2b57106..4b22a3f 100644 --- a/html/css/main.css +++ b/html/css/main.css @@ -257,7 +257,7 @@ code { margin: 0 auto; } -.canvas-container.crop #canvas { +.canvas-container.crop-mode #canvas { border: 2px dashed var(--primary-color); cursor: grab; } @@ -372,19 +372,24 @@ canvas.text-placement-mode { justify-content: center; } +.brush-tools, .text-tools, .crop-tools { display: none; } -.canvas-container.crop .tool-buttons, -.canvas-container.crop .brush-buttons, -.canvas-container.crop .text-tools { - display: none; +.canvas-container.brush-mode .brush-tools, +.canvas-container.text-mode .brush-tools, +.canvas-container.eraser-mode .brush-tools, +.canvas-container.text-mode .text-tools, +.canvas-container.crop-mode .crop-tools { + display: flex; } -.canvas-container.crop .crop-tools { - display: flex; +.canvas-container.crop-mode .tool-buttons, +.canvas-container.crop-mode .brush-tools, +.canvas-container.crop-mode .text-tools { + display: none; } .tool-button { diff --git a/html/index.html b/html/index.html index 0063ed4..35fd7f1 100644 --- a/html/index.html +++ b/html/index.html @@ -71,6 +71,9 @@ + + + diff --git a/html/js/crop.js b/html/js/crop.js index b957fed..b1cbf11 100644 --- a/html/js/crop.js +++ b/html/js/crop.js @@ -15,29 +15,25 @@ function resetCropStates() { lastPanY = 0; } -function removeEventListeners() { +function isCropMode() { + return canvas.parentNode.classList.contains('crop-mode'); +} + +function exitCropMode() { + canvas.parentNode.classList.remove('crop-mode'); + setCanvasTitle(""); + canvas.removeEventListener('wheel', handleBackgroundZoom); canvas.removeEventListener('mousedown', handleBackgroundPanStart); canvas.removeEventListener('mousemove', handleBackgroundPan); canvas.removeEventListener('mouseup', handleBackgroundPanEnd); canvas.removeEventListener('mouseleave', handleBackgroundPanEnd); - canvas.removeEventListener('touchstart', handleTouchStart); canvas.removeEventListener('touchmove', handleTouchMove); canvas.removeEventListener('touchend', handleBackgroundPanEnd); canvas.removeEventListener('touchcancel', handleBackgroundPanEnd); } -function isCropMode() { - return canvas.parentNode.classList.contains('crop'); -} - -function exitCropMode() { - removeEventListeners(); - canvas.parentNode.classList.remove('crop'); - setCanvasTitle(""); -} - function initializeCrop() { const imageFile = document.getElementById('imageFile'); if (imageFile.files.length == 0) { @@ -45,8 +41,8 @@ function initializeCrop() { return; } + exitCropMode(); resetCropStates(); - removeEventListeners(); canvas.style.backgroundImage = `url(${URL.createObjectURL(imageFile.files[0])})`; canvas.style.backgroundSize = '100%'; @@ -70,7 +66,7 @@ function initializeCrop() { ctx.clearRect(0, 0, canvas.width, canvas.height); setCanvasTitle("裁剪模式: 可用鼠标或触摸缩放移动图片"); - canvas.parentNode.classList.add('crop'); + canvas.parentNode.classList.add('crop-mode'); } function finishCrop() { diff --git a/html/js/main.js b/html/js/main.js index faa29e1..548f661 100644 --- a/html/js/main.js +++ b/html/js/main.js @@ -35,6 +35,9 @@ const canvasSizes = [ { name: '3.97_800_480', width: 800, height: 480 }, { name: '4.2_400_300', width: 400, height: 300 }, { name: '5.79_792_272', width: 792, height: 272 }, + { name: '5.83_600_448', width: 600, height: 448 }, + { name: '5.83_648_480', width: 648, height: 480 }, + { name: '7.5_640_384', width: 640, height: 384 }, { name: '7.5_800_480', width: 800, height: 480 }, { name: '10.2_960_640', width: 960, height: 640 }, { name: '10.85_1360_480', width: 1360, height: 480 }, @@ -450,6 +453,7 @@ function updateImage() { convertDithering(); } else { addLog("图片宽高比例与画布不匹配，已进入裁剪模式。"); + setActiveTool(null, ''); initializeCrop(); } }; diff --git a/html/js/paint.js b/html/js/paint.js index 4be33af..51e99b3 100644 --- a/html/js/paint.js +++ b/html/js/paint.js @@ -72,42 +72,6 @@ function initPaintTools() { document.getElementById('text-italic').classList.toggle('primary', textItalic); }); - setupCanvasForPainting(); - - // Ensure no tool is selected by default - updateToolUI(); -} - -function setActiveTool(tool, title) { - currentTool = tool; - updateToolUI(); - - setCanvasTitle(title); - - // Cancel any pending text placement - cancelTextPlacement(); -} - -function updateToolUI() { - // Update UI to reflect active tool or no tool - document.getElementById('brush-mode').classList.toggle('active', currentTool === 'brush'); - document.getElementById('eraser-mode').classList.toggle('active', currentTool === 'eraser'); - document.getElementById('text-mode').classList.toggle('active', currentTool === 'text'); - - // Show/hide brush tools - document.querySelectorAll('.brush-tools').forEach(el => { - el.style.display = ['brush', 'eraser', 'text'].includes(currentTool) ? 'flex' : 'none'; - }); - document.getElementById('brush-color').disabled = currentTool === 'eraser'; - document.getElementById('brush-size').disabled = currentTool === 'text'; - - // Show/hide text tools - document.querySelectorAll('.text-tools').forEach(el => { - el.style.display = currentTool === 'text' ? 'flex' : 'none'; - }); -} - -function setupCanvasForPainting() { canvas.addEventListener('mousedown', startPaint); canvas.addEventListener('mousemove', paint); canvas.addEventListener('mouseup', endPaint); @@ -120,6 +84,25 @@ function setupCanvasForPainting() { canvas.addEventListener('touchend', onTouchEnd); } +function setActiveTool(tool, title) { + setCanvasTitle(title); + currentTool = tool; + + canvas.parentNode.classList.toggle('brush-mode', currentTool === 'brush'); + canvas.parentNode.classList.toggle('eraser-mode', currentTool === 'eraser'); + canvas.parentNode.classList.toggle('text-mode', currentTool === 'text'); + + document.getElementById('brush-mode').classList.toggle('active', currentTool === 'brush'); + document.getElementById('eraser-mode').classList.toggle('active', currentTool === 'eraser'); + document.getElementById('text-mode').classList.toggle('active', currentTool === 'text'); + + document.getElementById('brush-color').disabled = currentTool === 'eraser'; + document.getElementById('brush-size').disabled = currentTool === 'text'; + + // Cancel any pending text placement + cancelTextPlacement(); +} + function startPaint(e) { if (!currentTool) return;