From a296d88d2cbbdc5ffcb32d4fd8bcdc8881fae760 Mon Sep 17 00:00:00 2001 From: Zhukj <3262118957> Date: Thu, 16 Apr 2026 10:27:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B7=A5=E5=85=B7=E6=A0=8F=EF=BC=8C=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=8A=A0=E7=B2=97=E3=80=81=E6=96=9C=E4=BD=93=E3=80=81?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E3=80=81=E5=AD=97=E4=BD=93=E3=80=81=E5=AD=97?= =?UTF-8?q?=E5=8F=B7=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++ index.html | 37 +++++++++++++++++++- js/script.js | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 211 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index b93ec22..047cab6 100644 --- a/css/style.css +++ b/css/style.css @@ -55,6 +55,86 @@ html, body { background: #3a7bc8; } +/* 文本编辑器工具栏 */ +.text-editor-toolbar { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + padding: 10px 16px; + background: #fff; + border-bottom: 1px solid #e0e0e0; + flex-shrink: 0; +} + +.toolbar-btn { + width: 40px; + height: 40px; + font-size: 18px; + font-weight: bold; + border: 1px solid #ddd; + border-radius: 8px; + background: #fff; + color: #333; + cursor: pointer; + transition: all 0.2s; +} + +.toolbar-btn:active { + background: #f0f0f0; +} + +.toolbar-btn.active { + background: #4a90e2; + color: #fff; + border-color: #4a90e2; +} + +.toolbar-btn.italic { + font-style: italic; +} + +.toolbar-divider { + width: 1px; + height: 28px; + background: #ddd; + margin: 0 4px; +} + +.toolbar-label { + display: flex; + align-items: center; + gap: 6px; + font-size: 13px; + color: #666; +} + +.toolbar-label select { + padding: 6px 8px; + font-size: 13px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + cursor: pointer; +} + +#fontSizePicker { + min-width: 60px; +} + +#fontPicker { + min-width: 55px; +} + +.toolbar-label input[type="color"] { + width: 36px; + height: 36px; + padding: 2px; + border: 1px solid #ddd; + border-radius: 6px; + cursor: pointer; +} + /* 图片展示区 */ .canvas-area { flex: 1; diff --git a/index.html b/index.html index c3b61de..32ac1de 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,42 @@
- + +
+ + +
+ + +
+ +
+ +
+
diff --git a/js/script.js b/js/script.js index 1e338c5..92f9efa 100644 --- a/js/script.js +++ b/js/script.js @@ -12,6 +12,12 @@ const exportCanvas = document.getElementById('exportCanvas'); const longPressTip = document.getElementById('longPressTip'); const canvasArea = document.getElementById('canvasArea'); + const textEditorToolbar = document.getElementById('textEditorToolbar'); + const boldBtn = document.getElementById('boldBtn'); + const italicBtn = document.getElementById('italicBtn'); + const colorPicker = document.getElementById('colorPicker'); + const fontPicker = document.getElementById('fontPicker'); + const fontSizePicker = document.getElementById('fontSizePicker'); let currentImage = null; let selectedInput = null; @@ -80,6 +86,9 @@ // 初始化右键菜单（只在3:5预览区域） initContextMenu(); + // 初始化文本编辑器工具栏 + initTextEditorToolbar(); + // 显示长按提示 setTimeout(() => { longPressTip.classList.add('show'); @@ -429,6 +438,9 @@ element.contentEditable = 'true'; element.focus(); + // 更新工具栏状态 + updateToolbarState(element); + // 光标定位到末尾 const range = document.createRange(); const sel = window.getSelection(); @@ -450,6 +462,44 @@ editingInput = null; } + // 更新工具栏状态 + function updateToolbarState(element) { + const style = window.getComputedStyle(element); + const fontWeight = style.fontWeight; + const fontStyle = style.fontStyle; + const color = style.color; + const fontFamily = style.fontFamily.replace(/['"]/g, ''); + const fontSize = parseInt(style.fontSize); + + // 更新加粗按钮状态 + boldBtn.classList.toggle('active', fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 700); + + // 更新斜体按钮状态 + italicBtn.classList.toggle('active', fontStyle === 'italic'); + + // 更新颜色选择器 + colorPicker.value = rgbToHex(color); + + // 更新字体选择器 + for (let option of fontPicker.options) { + if (option.value === fontFamily || fontFamily.includes(option.value)) { + fontPicker.value = option.value; + break; + } + } + + // 更新字号选择器 + fontSizePicker.value = fontSize.toString(); + } + + // RGB转十六进制 + function rgbToHex(rgb) { + if (rgb.startsWith('#')) return rgb; + const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + if (!match) return '#000000'; + return '#' + [match[1], match[2], match[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join(''); + } + // 取消所有选中 function deselectAll() { if (editingInput) { @@ -512,6 +562,51 @@ }); } + // 初始化文本编辑器工具栏 + function initTextEditorToolbar() { + // 加粗按钮 + boldBtn.addEventListener('click', () => { + if (!editingInput) return; + const isBold = boldBtn.classList.contains('active'); + if (isBold) { + editingInput.style.fontWeight = 'normal'; + } else { + editingInput.style.fontWeight = 'bold'; + } + boldBtn.classList.toggle('active'); + }); + + // 斜体按钮 + italicBtn.addEventListener('click', () => { + if (!editingInput) return; + const isItalic = italicBtn.classList.contains('active'); + if (isItalic) { + editingInput.style.fontStyle = 'normal'; + } else { + editingInput.style.fontStyle = 'italic'; + } + italicBtn.classList.toggle('active'); + }); + + // 颜色选择器 + colorPicker.addEventListener('input', () => { + if (!editingInput) return; + editingInput.style.color = colorPicker.value; + }); + + // 字体选择器 + fontPicker.addEventListener('change', () => { + if (!editingInput) return; + editingInput.style.fontFamily = fontPicker.value + ', sans-serif'; + }); + + // 字号选择器 + fontSizePicker.addEventListener('change', () => { + if (!editingInput) return; + editingInput.style.fontSize = fontSizePicker.value + 'px'; + }); + } + // 显示右键菜单 function showContextMenu(x, y) { hideContextMenu();