如何将Canvas绘制的Emoji轮廓转为Matter.js可用的多边形物理体？

问题概述 #

我已经实现了在Canvas上绘制Emoji轮廓的代码，但需要提取出一组轮廓点，用来作为Matter.js中的物理体形状。我尝试过研究SVG/图像追踪算法，但没能理解其中逻辑。不过我知道可以获取Canvas图像的alpha通道数据，所以觉得提取轮廓应该不算难。

我的Canvas绘制代码如下：

HTML代码 #

<canvas id="emoji" width="512" height="512" style="border: 1px solid red"></canvas>

JavaScript代码 #

const emoji = document.querySelector("#emoji")
if (emoji instanceof HTMLCanvasElement) {
  const context = emoji.getContext("2d")
  if (context instanceof CanvasRenderingContext2D) {
    const {
      clientWidth,
      clientHeight
    } = emoji
    context.save()
    const text = "🐳"
    context.font = `${Math.floor(Math.min(clientWidth, clientHeight) * (2 / 3))}px monospace`
    const {
      actualBoundingBoxLeft,
      actualBoundingBoxRight,
      actualBoundingBoxAscent,
      actualBoundingBoxDescent,
    } = context.measureText(text)
    context.fillStyle = "black"
    context.fillRect(0, 0, clientWidth, clientHeight)
    context.globalCompositeOperation = "destination-in"
    context.fillText(
      text,
      clientWidth / 2 + (actualBoundingBoxLeft - actualBoundingBoxRight) / 2,
      clientHeight / 2 +
      (actualBoundingBoxAscent - actualBoundingBoxDescent) / 2,
    )
    context.restore()
  }
}

我期望最终能得到类似这样的轮廓效果：

解决方案 #

基于Alpha通道的轮廓提取思路 #

既然已经能获取Canvas的图像数据，我们可以通过遍历像素的alpha值，找到边缘像素——也就是自身不透明，但周围存在透明像素的点。然后对这些点进行简化，得到适合Matter.js使用的轮廓点集。

具体实现步骤 #

1. 获取Canvas图像数据：使用getImageData获取整个Canvas的像素信息，其中每个像素的第4个值就是alpha通道（0=完全透明，255=完全不透明）。
2. 检测边缘像素：遍历每个像素，检查当前像素不透明（alpha=255），并且上下左右四个相邻像素中至少有一个是透明的（alpha=0），这样的像素就是轮廓点。
3. 简化轮廓点集：原始的边缘像素会非常密集，直接用于Matter.js会导致性能问题。可以使用道格拉斯-普克算法对点集进行抽稀，保留关键轮廓点。
4. 转换为Matter.js可用的形状：将简化后的点集整理成Matter.js要求的格式，创建Bodies.fromVertices物理体。

完整代码示例 #

const emoji = document.querySelector("#emoji")
if (emoji instanceof HTMLCanvasElement) {
  const context = emoji.getContext("2d")
  if (context instanceof CanvasRenderingContext2D) {
    // 原有绘制Emoji的代码
    const { clientWidth, clientHeight } = emoji
    context.save()
    const text = "🐳"
    context.font = `${Math.floor(Math.min(clientWidth, clientHeight) * (2 / 3))}px monospace`
    const {
      actualBoundingBoxLeft,
      actualBoundingBoxRight,
      actualBoundingBoxAscent,
      actualBoundingBoxDescent,
    } = context.measureText(text)
    context.fillStyle = "black"
    context.fillRect(0, 0, clientWidth, clientHeight)
    context.globalCompositeOperation = "destination-in"
    context.fillText(
      text,
      clientWidth / 2 + (actualBoundingBoxLeft - actualBoundingBoxRight) / 2,
      clientHeight / 2 + (actualBoundingBoxAscent - actualBoundingBoxDescent) / 2,
    )
    context.restore()

    // 提取轮廓点的逻辑
    function getContourPoints(canvas) {
      const ctx = canvas.getContext('2d')
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      const data = imageData.data
      const points = []

      // 遍历像素，检测边缘点
      for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
          const index = (y * canvas.width + x) * 4
          const alpha = data[index + 3]
          // 当前像素不透明
          if (alpha === 255) {
            let isEdge = false
            // 检查上下左右四个方向的像素是否有透明的
            // 上
            if (y > 0) {
              const topIndex = ((y - 1) * canvas.width + x) * 4
              if (data[topIndex + 3] === 0) isEdge = true
            }
            // 下
            if (!isEdge && y < canvas.height - 1) {
              const bottomIndex = ((y + 1) * canvas.width + x) * 4
              if (data[bottomIndex + 3] === 0) isEdge = true
            }
            // 左
            if (!isEdge && x > 0) {
              const leftIndex = (y * canvas.width + (x - 1)) * 4
              if (data[leftIndex + 3] === 0) isEdge = true
            }
            // 右
            if (!isEdge && x < canvas.width - 1) {
              const rightIndex = (y * canvas.width + (x + 1)) * 4
              if (data[rightIndex + 3] === 0) isEdge = true
            }
            // 如果是边缘点，添加到点集
            if (isEdge) {
              points.push({ x, y })
            }
          }
        }
      }
      return points
    }

    // 道格拉斯-普克算法：简化点集
    function simplifyPoints(points, tolerance) {
      if (points.length <= 2) return points

      let maxDistance = 0
      let index = 0
      const end = points.length - 1

      for (let i = 1; i < end; i++) {
        const distance = perpendicularDistance(points[i], points[0], points[end])
        if (distance > maxDistance) {
          maxDistance = distance
          index = i
        }
      }

      if (maxDistance > tolerance) {
        const left = simplifyPoints(points.slice(0, index + 1), tolerance)
        const right = simplifyPoints(points.slice(index), tolerance)
        return left.slice(0, -1).concat(right)
      } else {
        return [points[0], points[end]]
      }
    }

    // 计算点到线段的垂直距离
    function perpendicularDistance(point, lineStart, lineEnd) {
      const dx = lineEnd.x - lineStart.x
      const dy = lineEnd.y - lineStart.y
      if (dx === 0 && dy === 0) {
        return distance(point, lineStart)
      }
      const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy)
      const closestX = lineStart.x + t * dx
      const closestY = lineStart.y + t * dy
      return distance(point, { x: closestX, y: closestY })
    }

    // 计算两点间距离
    function distance(p1, p2) {
      const dx = p1.x - p2.x
      const dy = p1.y - p2.y
      return Math.sqrt(dx * dx + dy * dy)
    }

    // 获取并简化轮廓点
    const rawPoints = getContourPoints(emoji)
    // 调整tolerance值控制简化程度，值越大点越少
    const simplifiedPoints = simplifyPoints(rawPoints, 2)

    // 绘制简化后的轮廓（用于预览）
    context.strokeStyle = 'red'
    context.lineWidth = 2
    context.beginPath()
    simplifiedPoints.forEach((point, i) => {
      if (i === 0) {
        context.moveTo(point.x, point.y)
      } else {
        context.lineTo(point.x, point.y)
      }
    })
    context.closePath()
    context.stroke()

    // 转换为Matter.js可用的顶点格式（需要先引入Matter.js）
    // const vertices = simplifiedPoints.map(p => ({ x: p.x - emoji.width/2, y: p.y - emoji.height/2 }))
    // const body = Matter.Bodies.fromVertices(0, 0, vertices, { isStatic: false })
  }
}

说明 #

• 边缘检测：这里只检查了上下左右四个方向，也可以扩展为8方向检测，得到更完整的轮廓。
• 点集简化：tolerance参数决定了简化程度，数值越大，保留的点越少，轮廓越平滑，但细节也会减少，需要根据实际需求调整。
• Matter.js适配：由于Matter.js的坐标原点通常在画布中心，所以需要将轮廓点的坐标进行偏移转换，确保物理体位置正确。

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