javascript - PaperJS 增长矩形(比例)

Question

我在 paperjs 中有一个圆形和一个矩形对象。现在我想制作动画。在该动画中，圆圈上升并且矩形必须在圆圈之后(在圆圈底部)增长。我在这里有一个例子(不是我想要的那样工作)

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));