如何在使用 Point 绘制的路径上绘制以下图案答案

【问题标题】：How to draw the below patterns on the path which is drawn using the Point如何在使用 Point 绘制的路径上绘制以下图案
【发布时间】：2020-08-28 08:01:28
【问题描述】：

如果我们使用矩形连接很容易。因为我们使用点来绘制路径并将strokeWidth设置为看起来像矩形。有人可以帮我们在路径上绘制以下 3 个图案（这只是与 strokeWidth 连接的 2 个点）

【问题讨论】：

你想要一个带有该图案的矩形作为路径背景吗？还是您希望该模式作为路径 stroke？

标签： design-patterns line draw using paperjs

【解决方案1】：

Paper.js 没有内置的方法，但您可以使用矩形作为剪贴蒙版来解决它。

这里是sketch，演示了一个简化的解决方案，您应该能够适应您的特定用例。

const rectangle = new Path.Rectangle({
    from: view.center - [300, 50],
    to: view.center + [300, 50],
    fillColor: 'orange'
});

const spaceBetweenLines = 10;
const height = rectangle.bounds.height;
const totalWidth = rectangle.bounds.width + height;
const steps = Math.ceil(totalWidth / spaceBetweenLines);

const linesGroup = new Group();
for (let i = 0; i < steps; i++) {
    const x = i * spaceBetweenLines;
    const line = new Path.Line({
        from: [x, 0],
        to: [x + height, height],
        strokeColor: 'black',
        strokeWidth: 2
    });
    linesGroup.addChild(line);
}
linesGroup.position = rectangle.position;

const clipGroup = new Group({
    children: [rectangle.clone(), rectangle, linesGroup],
    clipped: true
});

【讨论】：