如何使用Paper.js制作线条填充效果？

Question

如何用Paper.js产生这种效果？

（最初发布为here）

Answer 1

您可以将形状垂直划分为给定数量的部分，然后在它们上进行迭代，并在部分中间的水平线和形状之间寻找相交点。然后，您只需要在每个交叉点之间画一条线即可。可以像使用Paper.js一样简单地用sketch完成。

// Controls how many lines are used to draw the shape.
const LINES_COUNT = 30;

// Draw the shape to fill with lines.
const shape = new Path.Star({
    center: view.center,
    points: 7,
    radius1: 75,
    radius2: 150,
    // We make it selected to better understand what is happening.
    selected: true
});


// Divide the shape vertically into sections.
for (let i = 0; i < LINES_COUNT; i++) {
    // Calculate the y middle of the section.
    const y = shape.bounds.top + (i + 0.5) * (shape.bounds.height / LINES_COUNT);

    // Create a horizontal line crossing the shape.
    const line = new Path.Line({
        from: [0, y],
        to: [view.bounds.right, y]
    });

    // Get intersections between the shape and the line.
    const intersections = line.getIntersections(shape);

    // Remove the line as we no longer need it.
    line.remove();

    // Every 2 intersections...
    for (let j = 0; j < intersections.length; j++) {
        if (j > 0 && j % 2 === 1) {
            // ...draw a line between intersections points.
            new Path.Line({
                from: [intersections[j - 1].point.x, y],
                to: [intersections[j].point.x, y],
                strokeColor: 'black',
                strokeWidth: shape.bounds.height * 0.5 / LINES_COUNT
            });
        }
    }
}