0

これは私のコードです：

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">

    // Create a Paper.js Path to draw a line into it:
    var path = new Path();
    // Give the stroke a color
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    // Move to start and draw a line from there
    path.moveTo(start);
    // Note the plus operator on Point objects.
    // PaperScript does that for us, and much more!
    function onFrame(event) {
        // Your animation code goes in here
        for (var i = 0; i < 100; i++) {
            path.add(new Point(i, i));
        }
    }

</script>
</head>
<body style="margin: 0;">
    <canvas id="myCanvas"></canvas>
</body>
</html>

ページが読み込まれると、線が描画されます。しかし、ポイントAからBへの線の描画をアニメーション化しようとしています。上記の私の試みは何もしていないようです...ページの読み込み時に線を描画するだけで、AからBへの実際の線のアニメーションはありません.

参考文献 http://paperjs.org/download/

4

1 に答える 1

5

すべてのフレームで for ループを実行しているため、同じ線分を一度に何度も再作成しています。代わりに、フレームごとに 1 つのセグメントを追加する必要があります。

// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
// path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
function onFrame(event) {
    // Your animation code goes in here
    if (event.count < 101) {
        path.add(start);
        start += new Point(1, 1);
    }
}

if ステートメントは、行の長さの制限として機能します。

また、パスにまだセグメントがない場合、path.moveTo(start) コマンドは何の意味も持たないことに注意してください。

フレームごとにポイントを追加したくないが、線の長さだけを変更したい場合は、セグメントの 1 つの位置を変更するだけです。最初に 2 つのセグメントをパスに追加して作成し、次に 2 番目のセグメントのフレームごとのポイント イベントの位置を変更します。

// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
path.add(new Point(100, 100));
path.add(new Point(100, 100));
// Move to start and draw a line from there
// path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
function onFrame(event) {
    // Your animation code goes in here
    if (event.count < 101) {
        path.segments[1].point += new Point(1, 1);
    }
}
于 2013-09-10T15:27:56.470 に答える