如何通过使用 PaperJS 消除无用点来连接连接的子路径？答案

【问题标题】：How to join connected sub-paths by eliminate useless point with PaperJS?如何通过使用 PaperJS 消除无用点来连接连接的子路径？
【发布时间】：2021-01-06 17:16:29
【问题描述】：

我有一条路径，它绘制了一个原点在“西”侧的圆，然后我通过移除顶部和底部来分割。然后我得到三个子路径：

左上角 1/4 圈
右半圈
左下角 1/4 圆

但即使是视觉上的 1 和 3 看起来像一个翻转的 2，1 和 3 实际上是两个子路径。我该如何优化呢？我试过smooth()、flatten()和simplified()都没有用。

这里是sketch。

【问题讨论】：

很难理解你想要做什么，你能否说明你想要实现的目标（例如之前/之后）？
@sasensi 也许我可以将我的问题简化为，如果我有一个由两个子路径 A 和 B 组成的复合路径，则 B 的开头与 A 的结尾相同，怎么办我将路径简化为从 A 开始到 B 结束的路径？

标签： paperjs

【解决方案1】：

根据您的简化案例，您只需构建一个由所有子路径段组成的新路径。为了稍微优化生成的路径，您可以跳过路径 B 的第一段，只保留它的句柄，因为它与路径 A 的最后一段相同。根据您的用例，您还可以使用相同的逻辑跳过路径 B 的最后一段，因为它与路径 A 的第一段相同，并确保将生成的路径设置为 closed。

这是一个sketch，展示了一种可能的实现方式。

const compoundPath = project.importJSON(
    ['CompoundPath', { 'applyMatrix': true, 'children': [['Path', { 'applyMatrix': true, 'segments': [[50, 700], [0, 700], [0, 600], [50, 600]] }], ['Path', { 'applyMatrix': true, 'segments': [[50, 600], [100, 600], [100, 700], [50, 700]] }]] }]
);
compoundPath.strokeColor = 'black';
project.activeLayer.addChild(compoundPath);

const subPaths = [];
compoundPath.children.forEach((child, i) => {
    subPaths.push(
        child
            .clone()
            .translate(0, 150)
            .addTo(project.activeLayer)
    );
});

const assembledPath = assembleSubPaths(subPaths);
assembledPath.strokeColor = 'black';

function assembleSubPaths(subPaths) {
    const path = new Path();
    subPaths.forEach((subPath) => {
        subPath.segments.forEach((segment, segmentIndex) => {
            const isFirstSegment = segmentIndex === 0;
            if (path.segments.length === 0 || !isFirstSegment) {
                path.add(segment);
            } else {
                path.lastSegment.handleOut = segment.handleOut;
            }
        });
        subPath.remove();
    });
    return path;
}

【讨论】：