PaperJS增长矩形(比例)

Question

我有一个圆形和一个矩形对象。现在我想做一个动画。在该动画中，圆圈向上，矩形必须在圆圈之后增长(在圆圈的底部)。我这里有一个例子(不是以我想要的方式工作)

example

代码：

var circlePath = new Path.Circle(new Point(50, 50), 25);
circlePath.strokeColor = 'black';

var rectanglePath = new Path.Rectangle({
    point: [20, 20],
    size: [60, 60],
    strokeColor: 'black'
});

var backgroundLayer = new Layer({
    children: [circlePath,rectanglePath],
    position: view.center
});

var newPosition = 200;

circlePath.onFrame = function(event){
    var vector = newPosition-circlePath.position.y;
    circlePath.position.y += vector / 50;
    growRect(rectanglePath.bounds.width, rectanglePath.position.y-circlePath.position.y, rectanglePath);
};

function growRect(width, height, elem){
    var scaleX = width/elem.bounds.width;
    var scaleY = height/elem.bounds.height;  
    var prevPos = new paper.Point(elem.bounds.x,elem.bounds.y);

    elem.scale(scaleX,scaleY);

    prevPos.x += elem.bounds.width/2;
    prevPos.y += elem.bounds.height/2;

    elem.position = prevPos;
};

也许有人能帮我一把！

Answer 1

scale函数可以将中心点作为第三个参数。如果使用矩形的底部作为缩放中心，则缩放中心的行为可能与您希望的一样。而且，代码会稍微短一些。你可以试试here

var circlePath = new Path.Circle(new Point(50, 50), 25);
circlePath.strokeColor = 'black';

var rectanglePath = new Path.Rectangle({
    point: [20, 20],
    size: [60, 60],
    strokeColor: 'black'
});

var backgroundLayer = new Layer({
    children: [circlePath,rectanglePath],
    position: view.center
});

var newPosition = 200;

circlePath.onFrame = function(event){
    var vector = newPosition-circlePath.position.y;
    circlePath.position.y += vector / 50;
    growRect(rectanglePath.bounds.width, rectanglePath.position.y-circlePath.position.y, rectanglePath);
};

function growRect(width, height, elem){
    var scaleX = width/elem.bounds.width;
    var scaleY = height/elem.bounds.height;  
    elem.scale(scaleX,scaleY, new paper.Point(elem.bounds.x,elem.bounds.bottom));