Paper.js - конвертировать `aperscript` в `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();
}
}

это дает мне ошибку:

Ошибка типа: undefined не является объектом (оценка 'tool.minDistance = 10')

Что такое tool Вот? Я понимаю, что мне может потребоваться объявить об этом, прежде чем я смогу его использовать. Есть идеи, как решить эту проблему?

Answer 1

Вы должны сделать глобальную область видимости, как указано в документации:

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;

Затем продолжайте как обычно, это настроит ваши инструменты. Подробнее можно найти здесь.

Кстати, вы на самом деле уже сделали это правильно для Path()То же самое относится и к Tool()

Answer 2

Когда я использую Paper.js непосредственно в javascript, я предпочитаю создавать бумажный объект следующим образом:

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/