SVG技术问题：能否在已有Path上精准排列指定数量的Circle？

核心思路 #

通过PathMeasure获取Path总长度，按指定数量等分路径，计算每个等分点的坐标，最后在对应位置绘制Circle，实现精准排列。

具体实现步骤（以Android为例） #

• 1. 计算Path总长度
  使用PathMeasure类获取自定义星形Path的完整长度：

  val pathMeasure = PathMeasure(yourStarPath, false)
  val totalPathLength = pathMeasure.length
  

• 2. 计算等分间隔
  假设需要排列targetCount个Circle，计算每个点之间的路径距离：

  val intervalDistance = totalPathLength / targetCount
  

  注：如果是闭合Path且不想首尾Circle重叠，可将间隔改为totalPathLength / (targetCount - 1)

• 3. 获取所有Circle的圆心坐标
  遍历计算每个等分点的坐标，存入列表：

  val circleCenterList = mutableListOf<PointF>()
  for (index in 0 until targetCount) {
      val currentDistance = intervalDistance * index
      val position = floatArrayOf(0f, 0f)
      // 获取对应距离的坐标点，忽略切线信息
      pathMeasure.getPosTan(currentDistance, position, null)
      circleCenterList.add(PointF(position[0], position[1]))
  }
  

• 4. 自动化绘制Circle
  遍历坐标列表，统一绘制Circle：

  val circlePaint = Paint().apply {
      color = Color.parseColor("#FF4081")
      style = Paint.Style.FILL
      isAntiAlias = true
  }
  val circleRadius = 8f // 根据需求自定义半径
  circleCenterList.forEach { center ->
      canvas.drawCircle(center.x, center.y, circleRadius, circlePaint)
  }
  

扩展优化 #

• 封装成工具方法，传入Path、目标数量、Circle半径三个参数，一键生成排列好的绘制逻辑。
• 若Path存在动态变化（如星形参数调整），可监听Path变化，自动重新计算坐标并刷新绘制。

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