如何沿现有路径均匀分布指定数量的段保证字体装饰密度一致

AI 小北

2026-9-24

解决方案

可以沿现有路径均匀分布指定数量的段，你用到的Paper.js本身就提供了相关API，只要调整现有代码逻辑即可实现效果。

核心思路

不要直接使用路径自带的segments属性取点，字体导出的路径自带的锚点数量由字形复杂度决定，天然分布不均
使用路径总长度做等分计算，调用getPointAt(offset)方法取对应位置的点，就能得到均匀分布的点位

调整后代码

paper.install(window);
const minMax = (min, max) => {
  return Math.floor(Math.random() * max + min);
};
window.onload = () => {
  paper.setup("canvas");
  let pathData;
  opentype.load(
    "https://assets.codepen.io/1070/pphatton-ultralight-webfont.woff",
    (err, font) => {
      if (err) {
        console.log(err);
        return;
      }
      class Doughnut {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.shape = new paper.Path.RegularPolygon({
            position: [this.x, this.y],
            sides: minMax(3, 8),
            radius: minMax(6, 12),
            fillColor: "black"
          });
        }
      }
      pathData = font.getPath("100", 0, 600, 600).toSVG();
      const number = new paper.Path(pathData);
      number.selected = true;
      number.fitBounds(paper.view.bounds);
      
      // 均匀取点放置形状逻辑
      const shapeCount = 50; // 自定义放置的形状总数量
      const pathTotalLength = number.length;
      for(let i = 0; i < shapeCount; i++){
        const offset = i / shapeCount * pathTotalLength;
        const point = number.getPointAt(offset);
        new Doughnut(point.x, point.y);
      }

      // 如果需要把路径本身拆成均匀段，取消注释以下代码
      // const segmentGap = pathTotalLength / shapeCount;
      // number.flatten(segmentGap);
    }
  );
};