1

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>
4

1 に答える 1

0

ここで簡単な解決策: 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);
};
于 2013-06-01T05:54:45.897 に答える