如何修改face-api.js面部关键点的pointColor与lineColor？

face-api.js的drawFaceLandmarks方法支持传入配置参数来修改关键点的样式，包括点颜色（pointColor）和连线颜色（lineColor），你只需要在调用方法时添加第三个参数即可。

修改后的代码示例 #

export const drawResults = async (image, canvas, results, type) => {
  if (image && canvas && results) {
    const imgSize = image.getBoundingClientRect();
    const displaySize = { width: imgSize.width, height: imgSize.height };
    faceapi.matchDimensions(canvas, displaySize);
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    const resizedDetections = faceapi.resizeResults(results, displaySize);

    // 定义通用的关键点样式配置
    const landmarkOptions = {
      pointColor: '#ff4081', // 自定义点颜色，示例为粉色
      lineColor: '#2196f3',  // 自定义连线颜色，示例为蓝色
      pointRadius: 2,        // 可选：调整点的大小
      lineWidth: 1           // 可选：调整连线宽度
    };

    switch (type) {
      case 'landmarks':
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections, landmarkOptions);
        break;
      case 'expressions':
        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
        break;
      case 'box':
        faceapi.draw.drawDetections(canvas, resizedDetections);
        break;
      case 'boxLandmarks':
        faceapi.draw.drawDetections(canvas, resizedDetections);
        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections, landmarkOptions);
        break;
      default:
        break;
    }
  }
};

补充说明 #

• pointColor和lineColor支持所有CSS合法颜色值（十六进制、RGB、颜色名称等）
• 额外可选配置：pointRadius控制关键点的大小，lineWidth控制连线的粗细
• 如果需要对不同区域的关键点（如眼部、唇部）设置差异化样式，可以拆分调用drawPoints和drawLines方法单独配置，通用场景下使用统一配置即可满足需求

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