Javascript 将圆角矩形变换为圆形

我一直在制作一个特定的动画，在这个动画中，我需要将圆角矩形形状转换为圆形。我查看了paper.js的文档，没有找到任何预定义的函数来实现这一点

->

动画需要平滑。由于我使用的矩形数量非常多，我不能使用“删除当前圆角矩形”和“重新绘制一个更圆角的版本”方法。它降低了性能，动画变得迟钝

这是我用来生成圆角矩形的代码

// Had to paste something to post the question
// Though the whole code can be seen on codepen link
var rect = new Rectangle();
var radius = 100, origin = {x: 100, y: 100};
rect.size = new Size(radius, radius);
rect.center = new Point(origin.x, origin.y);
var cornerSize = radius / 4;
var shape = new Path.Rectangle(rect, cornerSize);

准备此示例以显示进度

如果我们可以使用任何其他对象类型计算出整个动画，那也很好。现在我找不到任何可以将圆角矩形转换为圆形的属性

我还制作了对象颜色和位置的动画。我查阅了许多文档，以了解彩色动画

---

PS：如果有其他更好的技术来设置对象颜色的动画，也请分享。

将角大小更改为以下值

  var cornerSize = circle.radius / 1;

---

将拐角尺寸更改为以下值

  var cornerSize = circle.radius / 1;

---

首先必须创建一个圆角矩形路径。然后，动画中的每一步都必须修改路径的八段。这仅适用于路径对象，而不是矩形是形状时

线段点和控制柄的设置必须如下所示：

κkappa在paper.js中定义为数值。kappa更多关于kappa

更改半径的代码可能如下所示：

---

首先必须创建一个圆角矩形路径。然后，动画中的每一步都必须修改路径的八段。这仅适用于路径对象，而不是矩形是形状时

线段点和控制柄的设置必须如下所示：

κkappa在paper.js中定义为数值。kappa更多关于kappa

更改半径的代码可能如下所示：

---

非常感谢你。所以我是对的，形状没有这样的功能。我现在必须将所有形状更改为路径。这正是我需要的。@AkashK。事实上，我刚刚找到了一种使用形状的方法。看看我的新方法答案的编辑。我有点想知道你是如何找到这个答案的？是否有我遗漏的关于形状的文档或文章。通常情况下，没有人会考虑为矩形设置半径：p我希望我能再次对答案进行投票。如果你查看形状参考，你会看到半径属性。我刚试过，效果很好。非常感谢。所以我是对的，形状没有这样的功能。我现在必须将所有形状更改为路径。这正是我需要的。@AkashK。事实上，我刚刚找到了一种使用形状的方法。看看我的新方法答案的编辑。我有点想知道你是如何找到这个答案的？是否有我遗漏的关于形状的文档或文章。通常情况下，没有人会考虑为矩形设置半径：p我希望我能再次对答案进行投票。如果你查看形状参考，你会看到半径属性。我只是试了一下，结果成功了。

var size = 100;
var rect = new Shape.Rectangle(new Rectangle(new Point(100, 100), new Size(size, size)), 30);
rect.strokeColor = "red";

var step = 1;
var percentage = 0;

function onFrame(event) {
    percentage =  Math.min(50, Math.max(0, percentage + step));
    rect.radius = size * percentage / 100;
    if (percentage >= 50 || percentage <= 0) {
        step *= -1;
    }
}