PaperJS 增长矩形（比例）答案

【问题标题】：PaperJS growth rectangle (scale)PaperJS 增长矩形（比例）
【发布时间】：2015-12-14 12:11:05
【问题描述】：

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

代码：

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

也许有人可以帮助我！

【问题讨论】：

当您说矩形必须长大时，您的意思是它长大但与圆保持相同的距离吗？目前尚不清楚您希望它如何表现。
你不是从圆圈底部的矩形开始的。这对我来说还不清楚。

标签： javascript html animation paperjs

【解决方案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));

【讨论】：