Нарисуйте несколько кругов с помощью paperJS

Как я могу нарисовать несколько кругов с помощью paperjs? Я попытался удалить path.removeOnDrag(), он работает, и после удаления fillcolor результат не такой, как ожидалось.

<script type="text/paperscript" canvas="canvas">
        function onMouseDrag(event) {
            // The radius is the distance between the position
            // where the user clicked and the current position
            // of the mouse.
            var path = new Path.Circle({
                center: event.downPoint,
                radius: (event.downPoint - event.point).length,
                fillColor: null,
                strokeColor: 'black',
                strokeWidth: 10
            });

            // Remove this path on the next drag event:
            path.removeOnDrag();
        };
</script>

javascript paperjs
person chiyango    schedule 31.05.2013    source источник
comment
это помогает, если вы описываете, что вы ожидаете. Код делает именно то, что должен делать, так в чем проблема, которую вы видите? Также может быть полезен пример jsfiddle.net; в этом случае jsfiddle.net/vupt3   -  person Mike 'Pomax' Kamermans    schedule 01.06.2013
comment
Как показывает http://jsfiddle.net/vupt3/, я получаю вывод. Как нарисовать еще один круг, не скрывая первый.   -  person chiyango    schedule 01.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вот простое решение: http://jsfiddle.net/vupt3/1/

Итак, в mouseUp вы просто сохраняете текущий нарисованный путь в массив. Затем, если вам нужно, вы можете получить доступ к этим кольцам и управлять ими позже.

// path we are currently drawing
var path = null;

// array to store paths (so paper.js would still draw them)
var circles = [];
function onMouseDrag(event) {
    // The radius is the distance between the position
    // where the user clicked and the current position
    // of the mouse.
    path = new Path.Circle({
        center: event.downPoint,
        radius: (event.downPoint - event.point).length,
        fillColor: null,
        strokeColor: 'black',
        strokeWidth: 10
    });

    // Remove this path on the next drag event:
    path.removeOnDrag();

};

function onMouseUp(event) {
    // if mouseUp event fires, save current path into the array
    circles.push(path);
};
person Henrik Peinar    schedule 01.06.2013
comment
Спасибо, отлично работаете. Есть ли альтернативное решение для IE8. - person chiyango; 01.06.2013
comment
Нет. PaperJS не поддерживает IE 8. Подробнее читайте здесь: stackoverflow.com /questions/10751677/paper-js-with-excanvas - person Henrik Peinar; 01.06.2013