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

Question

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

标签： design-patternslinedrawusingpaperjs

Answer 1

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

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

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
});