forked from natuka/web.puabadge.com
Linzm
2 months ago
8 changed files with 989 additions and 56 deletions
@ -0,0 +1,586 @@ |
|||||||
|
// textHelper.ts
|
||||||
|
/** |
||||||
|
* 文字定位助手模块 |
||||||
|
* @module TextPosition |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* 创建文字定位助手实例 |
||||||
|
* @param {Object} options - 配置选项 |
||||||
|
* @param {Function} options.setData - 设置数据的方法（用于更新响应式数据） |
||||||
|
* @returns {Object} 包含renderText方法的对象 |
||||||
|
*/ |
||||||
|
export function createTextPosition({ setData }) { |
||||||
|
if (!setData) { |
||||||
|
throw new Error('setData is required'); |
||||||
|
} |
||||||
|
|
||||||
|
// 默认样式配置
|
||||||
|
const defaultStyle = { |
||||||
|
fontSize: 16, // 字体大小(px)
|
||||||
|
fontFamily: 'Arial', // 字体
|
||||||
|
color: '#000000', // 文字颜色
|
||||||
|
textAlign: 'left', // 文本对齐方式: left, center, right
|
||||||
|
fontWeight: 'normal', // 字体粗细: normal, bold
|
||||||
|
lineHeight: 1.5, // 行高
|
||||||
|
opacity: 1, // 透明度
|
||||||
|
backgroundColor: 'transparent', // 背景颜色
|
||||||
|
padding: 0, // 内边距(px)
|
||||||
|
borderRadius: 0, // 边框圆角(px)
|
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 渲染文字到指定位置 |
||||||
|
* @param {Object} options - 文字配置 |
||||||
|
* @param {string} options.text - 要显示的文字 |
||||||
|
* @param {number} options.x - 文字左上角X坐标(基于原始容器尺寸) |
||||||
|
* @param {number} options.y - 文字左上角Y坐标(基于原始容器尺寸) |
||||||
|
* @param {number} [options.width] - 文字容器宽度(基于原始容器尺寸) |
||||||
|
* @param {number} [options.height] - 文字容器高度(基于原始容器尺寸) |
||||||
|
* @param {Object} [options.style] - 文字样式配置 |
||||||
|
* @param {string} [options.bindKey] - 绑定到页面数据的键名 |
||||||
|
*/ |
||||||
|
|
||||||
|
function roundText({ shapeImage, x, y, width, height, radius, style = {}, bindKey = 'roundTextConfig', text = '', isFront = true, cachedImageInfo = null, onImageInfoCached = null }) { |
||||||
|
// 合并默认样式和用户自定义样式
|
||||||
|
const mergedStyle = { ...defaultStyle, ...style }; |
||||||
|
|
||||||
|
// 获取设备信息，计算缩放比例
|
||||||
|
const screenWidth = 320; |
||||||
|
|
||||||
|
// 计算宽度和高度的缩放比例
|
||||||
|
const scale = 0.6; |
||||||
|
|
||||||
|
// 计算字符位置的函数
|
||||||
|
const calculateTextPosition = (imageInfo) => { |
||||||
|
// 计算图片宽高比
|
||||||
|
const imageRatio = imageInfo.width / imageInfo.height; |
||||||
|
const containerRatio = 1; // 容器是正方形，宽高比为1
|
||||||
|
|
||||||
|
let ratio; |
||||||
|
|
||||||
|
// 根据图片和容器的比例关系决定如何缩放
|
||||||
|
if (imageRatio > containerRatio) { |
||||||
|
// 图片更宽，以宽度为基准缩放
|
||||||
|
ratio = screenWidth / imageInfo.width; |
||||||
|
} else { |
||||||
|
// 图片更高或等比，以高度为基准缩放
|
||||||
|
ratio = screenWidth / imageInfo.height; |
||||||
|
} |
||||||
|
|
||||||
|
// 计算缩放后的参数
|
||||||
|
const scaledX = x * ratio * scale; |
||||||
|
const scaledY = y * ratio * scale; |
||||||
|
const scaledWidth = width * ratio * scale; |
||||||
|
const scaledHeight = height * ratio * scale; |
||||||
|
const scaledRadius = radius * ratio * scale; |
||||||
|
const scaledFontSize = mergedStyle.fontSize * ratio * scale; |
||||||
|
|
||||||
|
// 计算圆心位置（基于容器的中心点）
|
||||||
|
const centerX = scaledX + scaledWidth / 2; |
||||||
|
const centerY = scaledY + scaledHeight / 2; |
||||||
|
|
||||||
|
// 计算每个字符的位置信息
|
||||||
|
// 根据正面/背面使用不同的计算方法，互不影响
|
||||||
|
const charList = isFront |
||||||
|
? calculateFrontRoundTextChars({ |
||||||
|
text: text, |
||||||
|
centerX: scaledWidth / 2, // 相对于容器的中心
|
||||||
|
centerY: scaledHeight / 2, |
||||||
|
radius: scaledRadius, |
||||||
|
fontSize: scaledFontSize, |
||||||
|
fontWeight: mergedStyle.fontWeight || 'normal', |
||||||
|
color: mergedStyle.color || '#000000' |
||||||
|
}) |
||||||
|
: calculateBackRoundTextChars({ |
||||||
|
text: text, |
||||||
|
centerX: scaledWidth / 2, // 相对于容器的中心
|
||||||
|
centerY: scaledHeight / 2, |
||||||
|
radius: scaledRadius, |
||||||
|
fontSize: scaledFontSize, |
||||||
|
fontWeight: mergedStyle.fontWeight || 'normal', |
||||||
|
color: mergedStyle.color || '#000000' |
||||||
|
}); |
||||||
|
|
||||||
|
// 构建圆形文字配置对象
|
||||||
|
const roundTextConfig = { |
||||||
|
x: scaledX, |
||||||
|
y: scaledY, |
||||||
|
width: scaledWidth, |
||||||
|
height: scaledHeight, |
||||||
|
centerX: centerX, |
||||||
|
centerY: centerY, |
||||||
|
radius: scaledRadius, |
||||||
|
text: text, |
||||||
|
charList: charList, // 字符位置列表
|
||||||
|
style: { |
||||||
|
...mergedStyle, |
||||||
|
fontSize: scaledFontSize, |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
console.log('roundTextConfig===>', roundTextConfig); |
||||||
|
|
||||||
|
// 更新页面数据
|
||||||
|
setData({ |
||||||
|
[bindKey]: roundTextConfig |
||||||
|
}); |
||||||
|
|
||||||
|
// 返回配置对象，以便后续使用
|
||||||
|
return roundTextConfig; |
||||||
|
}; |
||||||
|
|
||||||
|
// 如果已有缓存的图片信息，直接使用
|
||||||
|
if (cachedImageInfo && cachedImageInfo.src === shapeImage) { |
||||||
|
calculateTextPosition(cachedImageInfo); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// 否则获取图片信息
|
||||||
|
const img = new Image(); |
||||||
|
img.onload = () => { |
||||||
|
const res = { |
||||||
|
width: img.width, |
||||||
|
height: img.height, |
||||||
|
path: shapeImage, |
||||||
|
src: shapeImage |
||||||
|
}; |
||||||
|
|
||||||
|
// 如果提供了缓存回调，调用它
|
||||||
|
if (typeof onImageInfoCached === 'function') { |
||||||
|
onImageInfoCached(res); |
||||||
|
} |
||||||
|
|
||||||
|
calculateTextPosition(res); |
||||||
|
}; |
||||||
|
img.onerror = (err) => { |
||||||
|
console.error('Failed to get image info:', err); |
||||||
|
}; |
||||||
|
img.src = shapeImage; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 计算正面圆形文字中每个字符的位置和样式 |
||||||
|
* @param {Object} options - 配置选项 |
||||||
|
* @param {string} options.text - 文字内容 |
||||||
|
* @param {number} options.centerX - 圆心X坐标（相对于容器） |
||||||
|
* @param {number} options.centerY - 圆心Y坐标（相对于容器） |
||||||
|
* @param {number} options.radius - 半径 |
||||||
|
* @param {number} options.fontSize - 字体大小 |
||||||
|
* @param {string} options.fontWeight - 字体粗细 |
||||||
|
* @param {string} options.color - 文字颜色 |
||||||
|
* @returns {Array} 字符位置信息数组 |
||||||
|
*/ |
||||||
|
function calculateFrontRoundTextChars({ text, centerX, centerY, radius, fontSize, fontWeight, color }) { |
||||||
|
if (!text) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
// 计算字符宽度
|
||||||
|
// 使用更精确的估算方法
|
||||||
|
const charWidths = []; |
||||||
|
let totalWidth = 0; |
||||||
|
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
let charWidth; |
||||||
|
|
||||||
|
// 判断字符类型，使用不同的宽度估算
|
||||||
|
if (/[\u4e00-\u9fa5]/.test(char)) { |
||||||
|
// 中文字符：宽度约为 fontSize
|
||||||
|
charWidth = fontSize; |
||||||
|
} else if (/[0-9]/.test(char)) { |
||||||
|
// 数字：宽度约为 fontSize * 0.6
|
||||||
|
charWidth = fontSize * 0.6; |
||||||
|
} else if (/[a-zA-Z]/.test(char)) { |
||||||
|
// 英文字母：宽度约为 fontSize * 0.6（大写）或 0.5（小写）
|
||||||
|
charWidth = /[A-Z]/.test(char) ? fontSize * 0.65 : fontSize * 0.5; |
||||||
|
} else if (/[\u3000-\u303f\uff00-\uffef]/.test(char)) { |
||||||
|
// 全角符号：宽度约为 fontSize
|
||||||
|
charWidth = fontSize; |
||||||
|
} else { |
||||||
|
// 其他字符（半角符号等）：宽度约为 fontSize * 0.4
|
||||||
|
charWidth = fontSize * 0.4; |
||||||
|
} |
||||||
|
|
||||||
|
// 如果字体是粗体，稍微增加宽度
|
||||||
|
if (fontWeight === 'bold' || fontWeight === '700') { |
||||||
|
charWidth *= 1.1; |
||||||
|
} |
||||||
|
|
||||||
|
charWidths.push(charWidth); |
||||||
|
totalWidth += charWidth; |
||||||
|
} |
||||||
|
|
||||||
|
// 为文字之间添加2px间距（除了最后一个字符）
|
||||||
|
const spacing = 2; |
||||||
|
const totalSpacing = (text.length > 1) ? (text.length - 1) * spacing : 0; |
||||||
|
const totalWidthWithSpacing = totalWidth + totalSpacing; |
||||||
|
|
||||||
|
// 计算文字总弧长和每个字符的角度（正面使用原始半径）
|
||||||
|
const circumference = 2 * Math.PI * radius; |
||||||
|
const arcLength = totalWidthWithSpacing; |
||||||
|
const totalAngle = (arcLength / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算起始角度（使文字居中于底部）
|
||||||
|
// 从底部中心开始，顺时针排列，起始角度 = 底部中心 + 总角度的一半
|
||||||
|
const startAngle = Math.PI / 2 + totalAngle / 2; |
||||||
|
|
||||||
|
// 创建并定位每个字符（逆时针排列，所以角度递减）
|
||||||
|
let currentAngle = startAngle; |
||||||
|
const charList = []; |
||||||
|
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
const charWidth = charWidths[i]; |
||||||
|
|
||||||
|
// 计算字符角度增量（包括字符宽度和间距）
|
||||||
|
// 最后一个字符不需要添加后面的间距
|
||||||
|
const spacingAfter = (i < text.length - 1) ? spacing : 0; |
||||||
|
const charAngleIncrement = ((charWidth + spacingAfter) / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算字符角度位置（逆时针排列，所以角度递减）
|
||||||
|
// 字符中心位置 = 当前角度 - 字符宽度的一半对应的角度
|
||||||
|
const charWidthAngle = (charWidth / circumference) * 2 * Math.PI; |
||||||
|
const charAngle = currentAngle - charWidthAngle / 2; |
||||||
|
|
||||||
|
// 计算字符位置（正面使用原始半径）
|
||||||
|
const x = centerX + radius * Math.cos(charAngle); |
||||||
|
const y = centerY + radius * Math.sin(charAngle) - fontSize / 3; |
||||||
|
|
||||||
|
// 计算旋转角度（正面：文字底部向外，顶部朝向圆心）
|
||||||
|
const rotateAngle = charAngle + Math.PI * 1.5; |
||||||
|
// 转换为度数（用于CSS transform）
|
||||||
|
const rotateDeg = (rotateAngle * 180) / Math.PI; |
||||||
|
|
||||||
|
charList.push({ |
||||||
|
char: char, |
||||||
|
x: x, |
||||||
|
y: y, |
||||||
|
rotate: rotateAngle, |
||||||
|
rotateDeg: rotateDeg, // 度数版本
|
||||||
|
fontSize: fontSize, |
||||||
|
fontWeight: fontWeight, |
||||||
|
color: color |
||||||
|
}); |
||||||
|
|
||||||
|
// 更新当前角度（逆时针排列，所以角度递减）
|
||||||
|
currentAngle -= charAngleIncrement; |
||||||
|
} |
||||||
|
|
||||||
|
return charList; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 计算背面圆形文字中每个字符的位置和样式 |
||||||
|
* @param {Object} options - 配置选项 |
||||||
|
* @param {string} options.text - 文字内容 |
||||||
|
* @param {number} options.centerX - 圆心X坐标（相对于容器） |
||||||
|
* @param {number} options.centerY - 圆心Y坐标（相对于容器） |
||||||
|
* @param {number} options.radius - 半径 |
||||||
|
* @param {number} options.fontSize - 字体大小 |
||||||
|
* @param {string} options.fontWeight - 字体粗细 |
||||||
|
* @param {string} options.color - 文字颜色 |
||||||
|
* @returns {Array} 字符位置信息数组 |
||||||
|
*/ |
||||||
|
function calculateBackRoundTextChars({ text, centerX, centerY, radius, fontSize, fontWeight, color }) { |
||||||
|
if (!text) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
// 计算字符宽度
|
||||||
|
// 使用更精确的估算方法
|
||||||
|
const charWidths = []; |
||||||
|
let totalWidth = 0; |
||||||
|
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
let charWidth; |
||||||
|
|
||||||
|
// 判断字符类型，使用不同的宽度估算
|
||||||
|
if (/[\u4e00-\u9fa5]/.test(char)) { |
||||||
|
// 中文字符：宽度约为 fontSize
|
||||||
|
charWidth = fontSize; |
||||||
|
} else if (/[0-9]/.test(char)) { |
||||||
|
// 数字：宽度约为 fontSize * 0.6
|
||||||
|
charWidth = fontSize * 0.6; |
||||||
|
} else if (/[a-zA-Z]/.test(char)) { |
||||||
|
// 英文字母：宽度约为 fontSize * 0.6（大写）或 0.5（小写）
|
||||||
|
charWidth = /[A-Z]/.test(char) ? fontSize * 0.65 : fontSize * 0.5; |
||||||
|
} else if (/[\u3000-\u303f\uff00-\uffef]/.test(char)) { |
||||||
|
// 全角符号：宽度约为 fontSize
|
||||||
|
charWidth = fontSize; |
||||||
|
} else { |
||||||
|
// 其他字符（半角符号等）：宽度约为 fontSize * 0.4
|
||||||
|
charWidth = fontSize * 0.4; |
||||||
|
} |
||||||
|
|
||||||
|
// 如果字体是粗体，稍微增加宽度
|
||||||
|
if (fontWeight === 'bold' || fontWeight === '700') { |
||||||
|
charWidth *= 1.1; |
||||||
|
} |
||||||
|
|
||||||
|
charWidths.push(charWidth); |
||||||
|
totalWidth += charWidth; |
||||||
|
} |
||||||
|
|
||||||
|
// 为文字之间添加2px间距（除了最后一个字符）
|
||||||
|
const spacing = 1; |
||||||
|
const totalSpacing = (text.length > 1) ? (text.length - 1) * spacing : 0; |
||||||
|
const totalWidthWithSpacing = totalWidth + totalSpacing; |
||||||
|
|
||||||
|
// 计算文字总弧长和每个字符的角度
|
||||||
|
// 背面：文字到圆心的距离 = 半径 + 文字高度的一半
|
||||||
|
const adjustedRadius = radius + fontSize / 2; |
||||||
|
const circumference = 2 * Math.PI * adjustedRadius; |
||||||
|
const arcLength = totalWidthWithSpacing; |
||||||
|
const totalAngle = (arcLength / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算起始角度（使文字居中于底部）
|
||||||
|
// 从底部中心开始，顺时针排列，起始角度 = 底部中心 - 总角度的一半
|
||||||
|
const startAngle = Math.PI / 2 - totalAngle / 2; |
||||||
|
|
||||||
|
// 创建并定位每个字符（顺时针排列，所以角度递增）
|
||||||
|
let currentAngle = startAngle; |
||||||
|
const charList = []; |
||||||
|
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
const charWidth = charWidths[i]; |
||||||
|
|
||||||
|
// 计算字符角度增量（包括字符宽度和间距）
|
||||||
|
// 最后一个字符不需要添加后面的间距
|
||||||
|
const spacingAfter = (i < text.length - 1) ? spacing : 0; |
||||||
|
const charAngleIncrement = ((charWidth + spacingAfter) / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算字符角度位置（顺时针排列，所以角度递增）
|
||||||
|
// 字符中心位置 = 当前角度 + 字符宽度的一半对应的角度
|
||||||
|
const charWidthAngle = (charWidth / circumference) * 2 * Math.PI; |
||||||
|
const charAngle = currentAngle + charWidthAngle / 2; |
||||||
|
|
||||||
|
// 计算字符位置（背面：文字到圆心的距离 = 半径 + 文字高度的一半）
|
||||||
|
const x = centerX + adjustedRadius * Math.cos(charAngle); |
||||||
|
const y = centerY + adjustedRadius * Math.sin(charAngle); |
||||||
|
|
||||||
|
// 计算旋转角度（背面：文字底部朝向圆心，顶部向外）
|
||||||
|
const rotateAngle = charAngle + Math.PI * 0.5; |
||||||
|
// 转换为度数（用于CSS transform）
|
||||||
|
const rotateDeg = (rotateAngle * 180) / Math.PI; |
||||||
|
|
||||||
|
charList.push({ |
||||||
|
char: char, |
||||||
|
x: x, |
||||||
|
y: y, |
||||||
|
rotate: rotateAngle, |
||||||
|
rotateDeg: rotateDeg, // 度数版本
|
||||||
|
fontSize: fontSize, |
||||||
|
fontWeight: fontWeight, |
||||||
|
color: color |
||||||
|
}); |
||||||
|
|
||||||
|
// 更新当前角度（顺时针排列，所以角度递增）
|
||||||
|
currentAngle += charAngleIncrement; |
||||||
|
} |
||||||
|
|
||||||
|
return charList; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 初始化圆形文字 Canvas |
||||||
|
* @param {string} canvasId - Canvas 的 ID 或选择器 |
||||||
|
* @param {Object} config - 配置对象，包含 width 和 height |
||||||
|
* @returns {Promise} 返回包含 canvas 和 ctx 的对象 |
||||||
|
*/ |
||||||
|
function initRoundTextCanvas(canvasId, config) { |
||||||
|
return new Promise((resolve) => { |
||||||
|
const tryInit = () => { |
||||||
|
// 如果是选择器字符串，去掉 # 或 . 前缀
|
||||||
|
const selector = canvasId.startsWith('#') ? canvasId.slice(1) : |
||||||
|
canvasId.startsWith('.') ? canvasId.slice(1) : canvasId; |
||||||
|
|
||||||
|
// 尝试通过 ID 查找
|
||||||
|
let canvasElement: HTMLCanvasElement | null = document.getElementById(selector) as HTMLCanvasElement | null; |
||||||
|
|
||||||
|
// 如果找不到，尝试通过类名查找（取第一个）
|
||||||
|
if (!canvasElement && canvasId.startsWith('.')) { |
||||||
|
const elements = document.getElementsByClassName(selector); |
||||||
|
if (elements.length > 0) { |
||||||
|
canvasElement = elements[0] as HTMLCanvasElement; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 如果还是找不到，尝试直接使用 canvasId 作为选择器
|
||||||
|
if (!canvasElement) { |
||||||
|
canvasElement = document.querySelector(canvasId) as HTMLCanvasElement | null; |
||||||
|
} |
||||||
|
|
||||||
|
if (canvasElement && canvasElement instanceof HTMLCanvasElement) { |
||||||
|
const canvas = canvasElement; |
||||||
|
const ctx = canvas.getContext('2d'); |
||||||
|
if (!ctx) { |
||||||
|
throw new Error('无法获取 Canvas 2D 上下文'); |
||||||
|
} |
||||||
|
const dpr = window.devicePixelRatio || 1; |
||||||
|
|
||||||
|
// 使用配置中的尺寸，如果没有则使用 Canvas 的实际尺寸或默认值
|
||||||
|
const width = (config && config.width) || canvas.offsetWidth || 700; |
||||||
|
const height = (config && config.height) || canvas.offsetHeight || 700; |
||||||
|
|
||||||
|
canvas.width = width * dpr; |
||||||
|
canvas.height = height * dpr; |
||||||
|
ctx.scale(dpr, dpr); |
||||||
|
|
||||||
|
resolve({ canvas, ctx }); |
||||||
|
} else { |
||||||
|
// 如果 Canvas 还未渲染，延迟重试
|
||||||
|
setTimeout(() => { |
||||||
|
tryInit(); |
||||||
|
}, 100); |
||||||
|
} |
||||||
|
}; |
||||||
|
tryInit(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 在 Canvas 上绘制圆形文字 |
||||||
|
* @param {Object} options - 绘制选项 |
||||||
|
* @param {Object} options.ctx - Canvas 2D 上下文 |
||||||
|
* @param {Object} options.config - 圆形文字配置对象 |
||||||
|
* @param {Function} options.setData - 设置数据的方法 |
||||||
|
* @param {HTMLCanvasElement} options.canvas - Canvas 元素 |
||||||
|
* @param {string} options.imageKey - 图片数据键名，用于存储生成的图片路径 |
||||||
|
* @returns {Promise} 返回生成的图片路径（Data URL） |
||||||
|
*/ |
||||||
|
function drawRoundTextOnCanvas({ ctx, config, setData, canvas, imageKey = 'roundTextImage' }) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
if (!ctx || !config) { |
||||||
|
console.log('drawRoundTextOnCanvas: ctx 或 config 不存在', { ctx: !!ctx, config: !!config }); |
||||||
|
if (setData) { |
||||||
|
setData({ |
||||||
|
[imageKey]: '' |
||||||
|
}); |
||||||
|
} |
||||||
|
resolve(''); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const text = config.text; |
||||||
|
if (!text) { |
||||||
|
console.log('drawRoundTextOnCanvas: 文字为空'); |
||||||
|
// 如果没有文字，清空图片
|
||||||
|
if (setData) { |
||||||
|
setData({ |
||||||
|
[imageKey]: '' |
||||||
|
}); |
||||||
|
} |
||||||
|
resolve(''); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
console.log('drawRoundTextOnCanvas: 开始绘制文字', { text, config }); |
||||||
|
|
||||||
|
// 使用配置中的宽高
|
||||||
|
const canvasWidth = config.width || 700; |
||||||
|
const canvasHeight = config.height || 700; |
||||||
|
// 圆心位置：根据需求，圆心应该在容器的中心
|
||||||
|
// 由于容器就是 Canvas，所以圆心就是 Canvas 的中心
|
||||||
|
const centerX = canvasWidth / 2; |
||||||
|
const centerY = canvasHeight / 2; |
||||||
|
const radius = config.radius; |
||||||
|
const fontSize = config.style.fontSize; |
||||||
|
const color = config.style.color || '#000000'; |
||||||
|
const fontWeight = config.style.fontWeight || 'normal'; |
||||||
|
|
||||||
|
// 清空画布（注意：Canvas 的实际尺寸已经乘以了 dpr，但绘制时使用的是逻辑尺寸）
|
||||||
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
||||||
|
|
||||||
|
// 设置字体样式
|
||||||
|
ctx.font = `${fontWeight} ${fontSize}px sans-serif`; |
||||||
|
ctx.fillStyle = color; |
||||||
|
ctx.textAlign = 'center'; |
||||||
|
ctx.textBaseline = 'middle'; // 使用 middle 基线，文字中心对齐，更适合圆形排列
|
||||||
|
|
||||||
|
// 计算每个字符的角度
|
||||||
|
const circumference = 2 * Math.PI * radius; |
||||||
|
const charWidths = []; |
||||||
|
let totalWidth = 0; |
||||||
|
|
||||||
|
// 测量每个字符的宽度
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
const metrics = ctx.measureText(char); |
||||||
|
const width = metrics.width; |
||||||
|
charWidths.push(width); |
||||||
|
totalWidth += width; |
||||||
|
} |
||||||
|
|
||||||
|
// 计算文字总弧长和每个字符的角度
|
||||||
|
const arcLength = totalWidth; |
||||||
|
const totalAngle = (arcLength / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算起始角度（使文字居中于底部）
|
||||||
|
// 从底部中心开始，顺时针排列，起始角度 = 底部中心 + 总角度的一半
|
||||||
|
const startAngle = Math.PI / 2 + totalAngle / 2; |
||||||
|
|
||||||
|
// 创建并定位每个字符（逆时针排列，所以角度递减）
|
||||||
|
let currentAngle = startAngle; |
||||||
|
|
||||||
|
for (let i = 0; i < text.length; i++) { |
||||||
|
const char = text[i]; |
||||||
|
const charWidth = charWidths[i]; |
||||||
|
|
||||||
|
// 计算字符角度增量
|
||||||
|
const charAngleIncrement = (charWidth / circumference) * 2 * Math.PI; |
||||||
|
|
||||||
|
// 计算字符角度位置（逆时针排列，所以角度递减）
|
||||||
|
const charAngle = currentAngle - charAngleIncrement / 2; |
||||||
|
|
||||||
|
// 计算字符位置
|
||||||
|
const x = centerX + radius * Math.cos(charAngle); |
||||||
|
const y = centerY + radius * Math.sin(charAngle); |
||||||
|
|
||||||
|
// 保存上下文
|
||||||
|
ctx.save(); |
||||||
|
|
||||||
|
// 移动到字符位置
|
||||||
|
ctx.translate(x, y); |
||||||
|
|
||||||
|
// 旋转文字，使其沿着圆形路径排列
|
||||||
|
// 文字底部向外，顶部朝向圆心，所以旋转角度为字符角度 + π * 1.5
|
||||||
|
ctx.rotate(charAngle + Math.PI * 1.5); |
||||||
|
|
||||||
|
// 绘制文字（使用 0, 0 作为中心点，因为已经 translate 到字符位置）
|
||||||
|
ctx.fillText(char, 0, 0); |
||||||
|
|
||||||
|
// 恢复上下文
|
||||||
|
ctx.restore(); |
||||||
|
|
||||||
|
// 更新当前角度（逆时针排列，所以角度递减）
|
||||||
|
currentAngle -= charAngleIncrement; |
||||||
|
} |
||||||
|
|
||||||
|
// 将 Canvas 转换为图片（Data URL）
|
||||||
|
try { |
||||||
|
const dataURL = canvas.toDataURL('image/png'); |
||||||
|
if (setData) { |
||||||
|
setData({ |
||||||
|
[imageKey]: dataURL |
||||||
|
}); |
||||||
|
} |
||||||
|
resolve(dataURL); |
||||||
|
} catch (err) { |
||||||
|
console.error('Canvas 转图片失败:', err); |
||||||
|
reject(err); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
roundText, |
||||||
|
initRoundTextCanvas, |
||||||
|
drawRoundTextOnCanvas, |
||||||
|
calculateFrontRoundTextChars, |
||||||
|
calculateBackRoundTextChars |
||||||
|
}; |
||||||
|
} |
||||||
Loading…
Reference in new issue