-
+
+
+ 每个卡片展示文字落点区域，点击即可选用；之后仍可在画布上拖拽微调
+
+
+
{{ group.label }}
+
+
+
@@ -326,6 +329,7 @@ import {
clampPct,
createTextLayer,
defaultTextsForTemplate,
+ fontLoadName,
normalizeHotelWelcomeConfig,
resolveFontCss,
resolveTemplate,
@@ -567,19 +571,45 @@ function removeText(id) {
if (selectedId.value === id) selectedId.value = ''
}
+function buildTextShadow(t) {
+ const parts = []
+ if (t.shadow) {
+ parts.push('0 2px 8px rgba(0,0,0,0.55)', '0 0 2px rgba(0,0,0,0.4)')
+ }
+ // html2canvas 对 -webkit-text-stroke 支持差，用描边阴影模拟
+ if (t.stroke) {
+ const c = t.strokeColor || 'rgba(255,255,255,0.55)'
+ ;[-2, -1, 0, 1, 2].forEach((dx) => {
+ ;[-2, -1, 0, 1, 2].forEach((dy) => {
+ if (dx || dy) parts.push(`${dx}px ${dy}px 0 ${c}`)
+ })
+ })
+ }
+ return parts.length ? parts.join(', ') : 'none'
+}
+
+/** 拉丁文竖排：浏览器 writing-mode 会侧放字母；html2canvas 常变成直立叠字 */
+function isMostlyLatin(text) {
+ const s = String(text || '').replace(/\s/g, '')
+ if (!s) return false
+ const latin = (s.match(/[A-Za-z0-9&.,'’`!\-–—:;/+#@]/g) || []).length
+ return latin / s.length >= 0.55
+}
+
+function textAlignTransform(t) {
+ const align = t.align || 'center'
+ if (t.vertical) return 'translate(-50%, -50%)'
+ if (align === 'left') return 'translate(0, -50%)'
+ if (align === 'right') return 'translate(-100%, -50%)'
+ return 'translate(-50%, -50%)'
+}
+
function textStyle(t) {
const align = t.align || 'center'
- const transform = t.vertical
- ? 'translate(-50%, -50%)'
- : align === 'left'
- ? 'translate(0, -50%)'
- : align === 'right'
- ? 'translate(-100%, -50%)'
- : 'translate(-50%, -50%)'
- const style = {
+ return {
left: `${clampPct(t.x)}%`,
top: `${clampPct(t.y)}%`,
- transform,
+ transform: textAlignTransform(t),
fontSize: `${t.fontSize || 24}px`,
color: t.color || '#fff',
fontFamily: resolveFontCss(t.fontFamily),
@@ -587,12 +617,77 @@ function textStyle(t) {
letterSpacing: `${t.letterSpacing || 0}px`,
textAlign: align,
writingMode: t.vertical ? 'vertical-rl' : 'horizontal-tb',
+ textOrientation: t.vertical
+ ? (isMostlyLatin(t.content) ? 'sideways' : 'upright')
+ : 'mixed',
+ textShadow: buildTextShadow(t),
}
- if (t.stroke) {
- style.webkitTextStroke = `1px ${t.strokeColor || 'rgba(255,255,255,0.35)'}`
- style.paintOrder = 'stroke fill'
+}
+
+/** 导出专用样式：拉丁竖排改用 rotate，避免 html2canvas 直立叠字母 */
+function exportTextInlineStyle(t, exportRatio) {
+ const fontSize = (Number(t.fontSize) || 24) * exportRatio
+ const letterSpacing = (Number(t.letterSpacing) || 0) * exportRatio
+ const base = textStyle({ ...t, fontSize, letterSpacing })
+ const latinVertical = !!t.vertical && isMostlyLatin(t.content)
+
+ if (latinVertical) {
+ return {
+ left: base.left,
+ top: base.top,
+ // 等价于浏览器 vertical-rl + sideways：整词横排再旋转 90°
+ transform: 'translate(-50%, -50%) rotate(90deg)',
+ fontSize: `${fontSize}px`,
+ color: base.color,
+ fontFamily: base.fontFamily,
+ fontWeight: base.fontWeight,
+ letterSpacing: `${letterSpacing}px`,
+ textAlign: 'center',
+ writingMode: 'horizontal-tb',
+ textOrientation: 'mixed',
+ textShadow: base.textShadow,
+ whiteSpace: 'nowrap',
+ maxWidth: 'none',
+ width: 'auto',
+ wordBreak: 'keep-all',
+ border: 'none',
+ background: 'transparent',
+ padding: '0',
+ }
}
- return style
+
+ return {
+ left: base.left,
+ top: base.top,
+ transform: base.transform,
+ fontSize: `${fontSize}px`,
+ color: base.color,
+ fontFamily: base.fontFamily,
+ fontWeight: base.fontWeight,
+ letterSpacing: `${letterSpacing}px`,
+ textAlign: base.textAlign,
+ writingMode: base.writingMode,
+ textOrientation: base.textOrientation,
+ textShadow: base.textShadow,
+ whiteSpace: t.vertical ? 'nowrap' : 'pre',
+ maxWidth: 'none',
+ width: 'auto',
+ wordBreak: 'keep-all',
+ border: 'none',
+ background: 'transparent',
+ padding: '0',
+ }
+}
+
+async function ensureFontsLoaded() {
+ try { await document.fonts?.ready } catch { /* ignore */ }
+ const jobs = texts.value.map((t) => {
+ const family = fontLoadName(t.fontFamily)
+ const size = Math.max(12, Number(t.fontSize) || 24)
+ const weight = t.fontWeight || '400'
+ return document.fonts?.load?.(`${weight} ${size}px "${family}"`).catch(() => {})
+ })
+ await Promise.all(jobs)
}
function onTextPointerDown(e, t) {
@@ -656,24 +751,85 @@ async function saveDetail() {
}
async function exportPng() {
- const el = stageRef.value || document.querySelector('[data-hotel-welcome-capture]')
- if (!el) return
+ const stage = stageRef.value || document.querySelector('[data-hotel-welcome-capture]')
+ if (!stage) return
const prevSelected = selectedId.value
selectedId.value = ''
exporting.value = true
+ let host = null
try {
+ await ensureFontsLoaded()
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
- try { await document.fonts?.ready } catch { /* ignore */ }
- const baseW = Math.max(1, el.getBoundingClientRect().width || el.offsetWidth || 390)
- const scale = Math.min(3, Math.max(2.5, 1600 / baseW))
- const canvas = await html2canvas(el, {
+
+ const img = stage.querySelector('.hw-stage-img')
+ const displayW = Math.max(1, stage.getBoundingClientRect().width || stage.offsetWidth || 390)
+ const naturalW = Math.max(displayW, Number(img?.naturalWidth) || 0)
+ // 导出按原图像素宽度放大，文字字号同步放大，尽量 1:1 复刻画布
+ const exportW = Math.round(Math.min(2400, Math.max(displayW, naturalW)))
+ const exportRatio = exportW / displayW
+
+ host = document.createElement('div')
+ host.setAttribute('aria-hidden', 'true')
+ Object.assign(host.style, {
+ position: 'fixed',
+ left: '-100000px',
+ top: '0',
+ width: `${exportW}px`,
+ pointerEvents: 'none',
+ zIndex: '-1',
+ opacity: '0',
+ })
+ const clone = stage.cloneNode(true)
+ clone.classList.add('is-exporting')
+ clone.style.width = `${exportW}px`
+ clone.style.maxWidth = 'none'
+ clone.style.display = 'block'
+ clone.style.background = '#000'
+ const cloneImg = clone.querySelector('.hw-stage-img')
+ if (cloneImg) {
+ cloneImg.style.width = '100%'
+ cloneImg.style.height = 'auto'
+ cloneImg.style.maxWidth = 'none'
+ cloneImg.crossOrigin = 'anonymous'
+ }
+ const textNodes = [...clone.querySelectorAll('.hw-text')]
+ textNodes.forEach((node, i) => {
+ const t = texts.value[i]
+ if (!t) return
+ node.classList.remove('is-selected', 'is-shadow', 'is-vertical')
+ Object.assign(node.style, exportTextInlineStyle(t, exportRatio))
+ })
+ host.appendChild(clone)
+ document.body.appendChild(host)
+
+ // 等克隆图与字体就绪
+ if (cloneImg?.src) {
+ await new Promise((resolve) => {
+ if (cloneImg.complete && cloneImg.naturalWidth) return resolve()
+ cloneImg.onload = () => resolve()
+ cloneImg.onerror = () => resolve()
+ setTimeout(resolve, 4000)
+ })
+ }
+ await ensureFontsLoaded()
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
+
+ const canvas = await html2canvas(clone, {
useCORS: true,
allowTaint: true,
- backgroundColor: '#111111',
- scale,
+ backgroundColor: '#000000',
+ scale: 1,
logging: false,
imageTimeout: 20000,
removeContainer: true,
+ onclone: (_doc, el) => {
+ el.querySelectorAll('.hw-text').forEach((node, i) => {
+ const t = texts.value[i]
+ if (!t) return
+ node.classList.remove('is-selected', 'is-shadow', 'is-vertical')
+ Object.assign(node.style, exportTextInlineStyle(t, exportRatio))
+ })
+ },
})
const blob = await new Promise((resolve, reject) => {
canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('导出失败'))), 'image/png')
@@ -689,6 +845,7 @@ async function exportPng() {
console.error(e)
message.error('导出失败（跨域图片可能导致无法保存）')
} finally {
+ host?.remove()
selectedId.value = prevSelected
exporting.value = false
}
@@ -804,10 +961,12 @@ defineExpose({ loadList, refresh: loadList })
.hw-text {
position: absolute;
z-index: 2;
- max-width: 90%;
+ max-width: none;
padding: 2px 4px;
line-height: 1.25;
- white-space: pre-wrap;
+ /* 仅显式换行；避免大字距把英文挤成逐字竖排 */
+ white-space: pre;
+ word-break: keep-all;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
@@ -817,12 +976,16 @@ defineExpose({ loadList, refresh: loadList })
background: rgba(0, 0, 0, 0.12);
cursor: grabbing;
}
-.hw-text.is-shadow {
- text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
-}
.hw-text.is-vertical {
white-space: nowrap;
}
+.hw-tpl-modal-body {
+ max-height: min(70vh, 640px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ padding-right: 4px;
+ overscroll-behavior: contain;
+}
.hw-side-panel {
max-height: calc(100vh - 180px);
overflow: auto;