javascript - Paper.js - 将 `paperscript` 转换为 `javascript`

Question

我正在尝试更改此paperscript:

<script type="text/paperscript" canvas="canvas-1">
tool.minDistance = 10;
tool.maxDistance = 45;

var path;

function onMouseDown(event) {
    path = new Path();
    path.fillColor = new Color({ hue: Math.random() * 360, saturation: 1, brightness: 1 });

    path.add(event.point);
}

function onMouseDrag(event) {
    var step = event.delta / 2;
    step.angle += 90;

    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;

    path.add(top);
    path.insert(0, bottom);
    path.smooth();
}

function onMouseUp(event) {
    path.add(event.point);
    path.closed = true;
    path.smooth();
}
</script>

独立的javascript，例如:

paper.install(window);


window.onload = function() {
paper.setup('myCanvas');

tool.minDistance = 10;
tool.maxDistance = 45;

var path;

function onMouseDown(event) {
    path = new Path();
    path.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1
    };

    path.add(event.point);
}

function onMouseDrag(event) {
    var step = event.delta / 2;
    step.angle += 90;

    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;

    path.add(top);
    path.insert(0, bottom);
    path.smooth();
}

function onMouseUp(event) {
    path.add(event.point);
    path.closed = true;
    path.smooth();
}
}

它给了我一个错误:

TypeError: undefined is not an object (evaluating 'tool.minDistance = 10')

这里的工具是什么？我知道我可能需要先声明它才能使用它。知道如何解决这个问题吗？

Answer 1

您需要按照 documentation 中的概述设置全局范围。 :

paper.install(window);

然后继续进行全局定义。 :

window.onload = function() {
        // Get a reference to the canvas object
        paper.setup('myCanvas');
        // In your case create tools 
        var tool = new Tool();
        tool.minDistance = 10;
        tool.maxDistance = 45;

然后像往常一样继续，这将设置您的工具。更多信息请参见 here .

顺便说一句，您实际上已经对 Path() 正确执行了此操作，因此这同样适用于 Tool()