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不是对象（评估＆＃39; tool.minDistance = 10＆＃39）

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

Answer 1

您需要按照documentation：

中的说明制作全局范围

paper.install(window);

然后继续全球defs。：

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

如果你想使用工具，你需要用新纸减速它。工具（）; 例如，如果要检查是否单击了路径：

    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`

2 个答案: