浮雕挂饰

src/utils/textHelper.ts

@@ -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
+  };
+}