forked from natuka/web.puabadge.com
Linzm
2 months ago
8 changed files with 989 additions and 56 deletions
@ -0,0 +1,586 @@
@@ -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