Как сделать эффект заполнения строки с помощью Paper. js? - PullRequest
Новая
       46

Как сделать эффект заполнения строки с помощью Paper. js?

1 голос
/ 26 января 2020

Как создать такой эффект с Paper.js?

enter image description here

(первоначально размещено здесь )

1 Ответ

1 голос
/ 26 января 2020

Вы можете разделить свою форму по вертикали на определенное количество секций, а затем выполнить итерации по ним и искать пересечения между горизонтальной линией в середине секции и формой.
Затем вам просто нужно нарисовать линию между каждой парой пересечений.
Это можно сделать довольно просто с помощью Paper.js, как в этом наброске . 

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