javascript - 论文js限制总路径长度

Question

我正在尝试使用 Paper 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';
}

Answer 1

这是一个简单的 sketch演示如何实现这一目标。
希望代码足够清晰，您可以理解它并使其适应您的特定用例。

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