Бумага js ограничивает общую длину пути - PullRequest
Новая
       27

Бумага js ограничивает общую длину пути

3 голосов
/ 14 января 2020

Я пытаюсь разработать функцию рисования на бумаге Js, в которой у пользователя реально заканчиваются «чернила».

Кто-нибудь знает, как это сделать? Я посмотрел на ограничение длины пути. Но, что важно, мой пользователь не должен быть ограничен длиной пути каждого штриха, а должен иметь общую длину пути всех своих штрихов. Итак, представьте, например, что у вас есть только 1 унция чернил (или, например, 10 дюймов чернил) для использования во всем вашем чертеже.

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

var myPath;

function onMouseDown(event) {
    myPath = new Path();
    myPath.strokeColor = 'black';
}

function onMouseDrag(event) {
    myPath.add(event.point);
}

function onMouseUp(event) {
    var line = new Path({
    });
    line.strokeColor = 'black';
}

1 Ответ

3 голосов
/ 17 января 2020

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

// Cumulated length for all drawn paths over which drawing stops.
const MAX_LENGTH = 1500;

// Stores drawn paths.
let paths = [];
// Stores currently drawing path.
let currentPath;

// On mouse down...
function onMouseDown(event) {
    // ...if drawing is still allowed...
    if (maxLengthIsExceeded()) {
        return;
    }
    // ...create a new path...
    currentPath = new Path({
        segments: [event.point],
        strokeColor: 'black'
    });
    // ...and add it to the stack.
    paths.push(currentPath);
}

// On mouse drag...
function onMouseDrag(event) {
    // ...if drawing is still allowed...
    if (maxLengthIsExceeded()) {
        return;
    }
    // ...continue drawing the current path.
    currentPath.add(event.point);
}

// Checks whether cumulated paths length exceeds the limit.
function maxLengthIsExceeded() {
    const totalLength = paths.reduce((sum, path) => sum += path.length, 0);
    return totalLength > MAX_LENGTH;
}
...