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')

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

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()

Answer 2

当我在 javascript 中直接使用 Paper.js 时，我更喜欢这样创建纸张对象：

var canvas = document.getElementById('canvas-line');
paper.setup(canvas);
// and then if you want to create some Paper.js object prefix it's name with paper
var myPath = new paper.Path();

如果你想使用工具，你需要用新的paper.Tool();来减速它；例如，如果你想检查路径是否被点击：

    var tool1 = new paper.Tool();

    var handle;
    var myPath;
    myPath.fullySelected = true;

    tool1.onMouseDown = function(event) {
        handle = null;
        // Do a hit test on path for handles:
        var hitResult = myPath.hitTest(event.point, {
            handles: true,
            fill: true,
            stroke: true,
            segments: true,
            tolerance: 2
        });

        if (hitResult) {
            if (hitResult.type == 'handle-in') {
                handle = hitResult.segment.handleIn;
            } else if (hitResult.type == 'segment') {
                handle = hitResult.segment.point;
            } else if (hitResult.type == 'handle-out') {
                handle = hitResult.segment.handleOut;
            }
        }
    }

您可以在此处找到有关工具的更多信息http://paperjs.org/reference/tool/

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

Paper.js - convert `paperscript` to `javascript`

javascript

paperjs