React Native中如何检测并获取react-native-svg的SvgText的所有边框坐标

react-native-svg 的 <SvgText> 组件本身没有提供直接获取文本轮廓坐标的接口，你可以通过以下通用方案实现需求，覆盖所有大写英文字母的绘制校验：

1. 预生成所有字母的SVG路径 #

提前将26个大写英文字母转换为标准SVG路径字符串，存储为常量配置。你可以用字体转路径工具导出对应路径，注意导出时使用的字体要和APP内使用的字体完全一致，避免轮廓偏差。
示例配置如下：

// 常量文件：所有大写字母的SVG路径配置，可一次性导出全部26个字母的路径
export const LETTER_PATH_CONFIG = {
  // 示例为字母B的路径，其他字母同理补充
  B: "M128 0v512h256q53 0 90.5 -27.5t58 -72t21.5 -98.5q0 -42 -13 -76t-37 -58.5t-57 -35.5q32 -14 53 -42t32 -66t9 -71q0 -53 -20.5 -94.5t-56 -66t-82.5 -24h-256z M128 64h192q37 0 63.5 16.5t40 44t14.5 63.5q0 36 -14.5 63t-40 43.5t-63.5 16.5h-192v-247z M128 320h192q46 0 77.5 22t47.5 56.5t12 72.5q0 41 -12 72t-47.5 56t-77.5 21.5h-192v-300z"
}

2. 替换原有SvgText为Path渲染 #

用预生成的路径替代原有的<SvgText>渲染字母，通过transform调整路径的缩放和位移，实现和原有文本完全一致的显示效果，同时给路径绑定ref用于后续校验：

// 构造函数内新增路径ref
this.letterPathRef = React.createRef();

渲染部分修改为：

<Svg style={styles.contentContainer} height='100%' width='100%' fill="#000000" >
  {/* 用Path替代SvgText渲染字母 */}
  <Path
    ref={this.letterPathRef}
    d={LETTER_PATH_CONFIG.B}
    fill="#FFFFFF"
    transform="translate(80, 0) scale(0.78)" // 按需调整参数让字母居中适配画布
    onMoveShouldSetResponder={() => true}
    onStartShouldSetResponder={() => true}
    onMoveShouldSetPanResponder={() => true}
    onResponderMove={(e) => {
      const x = e.nativeEvent.locationX;
      const y = e.nativeEvent.locationY;
      // 实时校验点是否在字母轮廓内
      const isInRange = this.letterPathRef.current?.isPointInFill({x, y});
      // 超出范围直接终止，也可以加自定义提示
      if (!isInRange) return;
      this.state.points.push([x, y]);
      this.setState({ currentPath: this.createSVGPath(this.state.points, 1, true) });
    }}
    onResponderRelease={() => {
      this.checkDrawComplete();
      this.setState({ points: [], currentPath: null })
    }}
  />
  <Path
    d={this.state.currentPath}
    fill="none"
    stroke={colorStyles.intenseColor}
    strokeWidth={5}
    opacity={1}
  />
</Svg>

3. 实现绘制完整性校验 #

提前为每个字母生成一批采样校验点，存储为常量配置。用户绘制结束后，检查所有校验点的周边是否存在用户的绘制点，覆盖率达标即可判定为绘制完整：

// 常量文件：每个字母对应的采样校验点，可从对应路径中均匀采样生成
export const LETTER_VALIDATION_POINTS = {
  // 示例为字母B的采样点，其他字母同理补充
  B: [[130,70], [130, 200], [130, 350], [220, 120], [300, 180], [250, 380], [350, 450] /* 省略其余采样点 */]
}

// 组件内新增完整性校验方法
checkDrawComplete = () => {
  const validatePoints = LETTER_VALIDATION_POINTS.B;
  const userPoints = this.state.points;
  // 允许的误差半径，可按需调整
  const toleranceRadius = 8;
  let coveredCount = 0;
  validatePoints.forEach(vp => {
    const hasCover = userPoints.some(up => 
      Math.hypot(up[0] - vp[0], up[1] - vp[1]) < toleranceRadius
    );
    if (hasCover) coveredCount++;
  })
  // 覆盖率达到95%以上判定为绘制完整，阈值可按需调整
  const isQualified = (coveredCount / validatePoints.length) >= 0.95;
  if (isQualified) {
    // 绘制合格的业务逻辑
  } else {
    // 绘制不合格的提示逻辑
  }
}

方案优势 #

• 通用性强：所有字母只需要导出一次路径和校验点，不需要为每个字母写单独的硬编码校验逻辑
• 性能优异：点是否在轮廓内的校验由react-native-svg原生API实现，运行速度快无卡顿
• 准确率高：预生成的路径和APP渲染效果完全一致，不会出现校验偏差

内容的提问来源于stack exchange，提问作者Karolis Kajenas