Блог

Главная - Вопросы по программированию - Как нарисовать приведенные ниже шаблоны на пути, который рисуется с использованием точки

Как нарисовать приведенные ниже шаблоны на пути, который рисуется с использованием точки

#design-patterns #line #draw #using #paperjs

#дизайн-шаблоны #линия #нарисовать #используя #paperjs

Вопрос:

Это было бы легко, если бы мы использовали прямоугольник для соединения.Поскольку мы использовали точки для рисования контура и задали ширину штриха, чтобы он выглядел как прямоугольник. Может кто-нибудь, пожалуйста, помочь нам нарисовать приведенные ниже 3 шаблона на пути (который состоит всего из 2 точек, соединенных шириной штриха)

введите описание изображения здесь

Комментарии:

1. Вы хотите прямоугольник с этим шаблоном в качестве фона пути? Или вы хотите, чтобы этот шаблон был штрихом контура?

Ответ №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
});