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

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

最佳答案

这是一个简单的 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;
}

关于javascript - 论文js限制总路径长度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59728133/