MediaPipe JavaScript自定义姿态连接绘制失败求助

核心问题 #

你的关键点能正常绘制，但连接不显示，本质是drawConnectors默认会校验关键点的visibility属性——而你的日志显示该属性为undefined，方法直接判定连接不满足绘制条件，跳过了渲染。

快速解决方案 #

在调用drawConnectors时添加ignoreVisibility: true配置，强制跳过可见度检查：

drawingUtils.drawConnectors(landmarks, myConnections, { 
  color: '#00FF00', 
  lineWidth: 4,
  ignoreVisibility: true // 关键配置，关闭可见度校验
});

深层排查与优化 #

1. 确认使用归一化关键点 #

MediaPipe PoseLandmarker会返回两种关键点：

• normalizedLandmarks：基于图像坐标系的归一化点，包含visibility属性（前提是模型配置开启输出）
• worldLandmarks：基于真实世界坐标系的点，没有visibility属性

确保你传入drawConnectors的是归一化关键点：

// 正确示例：取归一化关键点
const landmarks = results.poseLandmarks[0].normalizedLandmarks;

2. 检查PoseLandmarker配置 #

初始化PoseLandmarker时，确认开启了可见度输出（默认是开启的，但如果手动关闭过需要恢复）：

const poseLandmarker = await PoseLandmarker.createFromOptions(options, {
  baseOptions: {
    modelAssetPath: 'pose_landmarker.task'
  },
  outputVisibility: true, // 确保开启可见度输出
  numPoses: 1
});

3. 使用SDK内置连接常量 #

如果你用的是@mediapipe/tasks-vision包，可以直接导入官方定义的连接常量，避免手动索引出错：

import { PoseLandmarker, POSE_CONNECTIONS } from '@mediapipe/tasks-vision';

// 直接使用内置连接
drawingUtils.drawConnectors(landmarks, POSE_CONNECTIONS, { 
  color: '#00FF00', 
  lineWidth: 4,
  ignoreVisibility: true
});

为什么旧版API能正常工作 #

旧版MediaPipe Pose API的drawConnectors默认不检查visibility属性，即使该属性不存在也会正常绘制连接。而新版Vision API调整了默认行为，增加了可见度过滤，这是导致兼容性问题的核心原因。

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