用paper.js扩大规模

Question

im using paper.js to create a ball and im trying to enlarge it per click.

So i can easily enlarge the area by changing the radius which is what i do but it also uses segments for collision and physics etc.

Anyway when the ball is first created it applys the correct segments but when im enlarging it, i want more segments to compensate for its size.

Im copying the code which works at the start but here it works for all but 1 segment that spawns at 0,0 and messes up the area of the circle. Here is that code :

balls[0].radius = Math.sqrt((balls[0].path.area + balls[0].score)/ Math.PI);

balls[0].maxVec = 15;
balls[0].numSegment = Math.floor(balls[0].radius / 3 + 2);
balls[0].boundOffset = [];
balls[0].boundOffsetBuff = [];
balls[0].sidePoints = [];

for (var i = 0; i < balls[0].numSegment; i ++) {
    balls[0].boundOffset.push(balls[0].radius);
    balls[0].boundOffsetBuff.push(balls[0].radius);
    balls[0].path.add(new Point());
    balls[0].sidePoints.push(new Point({
        angle: 360 / balls[0].numSegment * i,
        length: 1
    }));
}

Here is the js fiddle - http://jsfiddle.net/wMQth/147/

Answer 1

You need to remove existing points in your path before adding new ones.
Here is the modified fiddle .

balls[0].radius = Math.sqrt((balls[0].path.area + balls[0].score)/ Math.PI);

balls[0].maxVec = 15;
balls[0].numSegment = Math.floor(balls[0].radius / 3 + 2);
balls[0].boundOffset = [];
balls[0].boundOffsetBuff = [];
balls[0].sidePoints = [];

// reset path before adding new points
balls[0].path.removeSegments();

for (var i = 0; i < balls[0].numSegment; i ++) {
    balls[0].boundOffset.push(balls[0].radius);
    balls[0].boundOffsetBuff.push(balls[0].radius);
    balls[0].path.add(new Point());
    balls[0].sidePoints.push(new Point({
        angle: 360 / balls[0].numSegment * i,
        length: 1
    }));
}