如果路径形状为两个或多个“0”，则 if else 语句中用于划分路径的逻辑

Question

大家好试图在 paper.js 中编写一些逻辑（也使用 opentype.js 字体数据）以便当数字包含两个或多个连续的零时，零路径被分开，以便它是实心的。

我所知道的事情零路径，使用我的特殊字体，由具有 19 段的外部路径和由 18 段组成的内部路径组成

所以我想尝试遍历所有路径，检查路径是否有 19 个段，下一个路径是否有 18 个段，然后调用 path.unite() 哪种方法有效。但我只希望它用连续的“0”来做到这一点，例如“100”、“1000”而不是 10。

所以我试图做一个 if else 语句，其中 if-else（当前路径有 18 个段，下一个路径小于 18 个段）如果为真则什么都不做或调用 path.divide() ？

我确信有更好的方法可以做到这一点。你能帮忙吗

paper.install(window);
window.onload = () => {
  paper.setup("canvas");
  opentype.load(
    "https://assets.codepen.io/1070/pphatton-ultralight-webfont.woff",
    (err, font) => {
      if (err) {
        console.log(err);
      } else {
        const fontPath = font.getPath("10k", 0, 100, 100).toSVG();
        const count = new paper.CompoundPath(fontPath);
        count.unite();
        count.children.forEach((child, i) => {
           if (
            child.segments.length === 19 &&
            count.children[i + 1].segments.length === 18
          ) {
            const eye = child.unite();
            eye.selected = true;
          } else if(
            count.children[i + 1].segments.length === 18
            && child.segments.length < 18
          ) {
            console.log('hello');
            // const target = child.divide();
            count.children[i].fillColor = 'black'
          } else{
            
          }
        });
        // const flatCount = count.children[1].unite()

        // console.log(count.children[2].segments.length)
        // const flatCountTwo = count.children[5].unite()
        // flatCount.translate(5,0)
        count.fillColor = "red";

        project.activeLayer.fitBounds(view.bounds.scale(0.6));
      }
    }
  );
};

Answer 1

我认为与其使用 Font.getPath 检索整个文本的单个 svg 路径，不如使用 Font.getPaths 检索每个字符的 svg 路径。
这样您就可以非常简单地直接对输入字符串进行分析，并以不同于其他字符的方式处理连续的 0。

编辑

为了检测连续的零，是的，您可以使用正则表达式或在字符上循环，就像我在以下示例中所做的那样。
fiddle 展示了一个可能的解决方案。

const handleZero = (path) => {
    path.children = path.children.slice(0, 1);
};

const getConsecutiveZerosIndices = (content) => {
    const zero = '0';
    return [...content]
        .map((char, i) => ({ char, i }))
        .filter(({ char, i }) => {
            const previousCharacter = content?.[i - 1];
            const nextCharacter = content?.[i + 1];
            return char === zero && (previousCharacter === zero || nextCharacter === zero);
        })
        .map(({ i }) => i);
};

const drawText = (content, font) => {
    const fontPaths = font.getPaths(content, 0, 100, 100);
    const consecutiveZerosIndices = getConsecutiveZerosIndices(content);
    const paths = fontPaths.map((fontPath, i) => {
        const path = new paper.CompoundPath(fontPath.toSVG());
        if (consecutiveZerosIndices.includes(i)) {
            handleZero(path);
        }
        return path;
    });
    const group = new paper.Group(paths);
    group.fillColor = 'red';
    return group;
};

const draw = (font) => {
    const path1 = drawText('10k', font);
    const path2 = drawText('100k', font);
    const path3 = drawText('1000k', font);

    path2.position = path1.position.add(0, path1.bounds.height * 1.2);
    path3.position = path2.position.add(0, path2.bounds.height * 1.2);

    paper.project.activeLayer.fitBounds(paper.view.bounds.scale(0.6));
};

paper.setup('canvas');
opentype.load(
    'https://assets.codepen.io/1070/pphatton-ultralight-webfont.woff',
    (err, font) => draw(font)
);

如果路径形状为两个或多个“0”，则 if else 语句中用于划分路径的逻辑

Logic in if else statement to divide path if path shape is two or more '0'

paperjs

编辑