将圆角矩形转换为圆形

Question

我一直在制作一个特定的动画，我需要将圆角矩形形状（通过动画）转换为圆形。我检查了 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);

准备了这个Codepen 示例以显示进度。

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

我还在动画对象和位置的颜色。我翻阅了许多文档以找出彩色动画。

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

Answer 1

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

必须像这样设置分段点和句柄：

κ (kappa) 在 paper.js 中定义为 Numerical.KAPPA（更多关于 Kappa here）。

更改半径的代码可能如下所示 (Click here for the Sketch)：

var rect = new Path.Rectangle(new Point(100, 100), new Size(100, 100), 30);
rect.fullySelected = true;

var step = 1;
var percentage = 0;

function onFrame(event) {
    percentage += step;
    setCornerRadius(rect, percentage)
    if (percentage > 50 || percentage < 0) {
        step *= -1;
    }
}

function setCornerRadius(rectPath, roundingPercent) {
    roundingPercent = Math.min(50, Math.max(0, roundingPercent));
    var rectBounds = rectPath.bounds;
    var radius = roundingPercent/100 * Math.min(rectBounds.width, rectBounds.height);
    var handleLength = radius * Numerical.KAPPA;

    l = rectBounds.getLeft(),
    t = rectBounds.getTop(),
    r = rectBounds.getRight(),
    b = rectBounds.getBottom();

    var segs = rectPath.segments;
    segs[0].point.x = segs[3].point.x = l + radius;
    segs[0].handleOut.x = segs[3].handleIn.x = -handleLength;
    segs[4].point.x = segs[7].point.x = r - radius;
    segs[4].handleOut.x = segs[7].handleIn.x = handleLength;
    segs[1].point.y = segs[6].point.y = b - radius;
    segs[1].handleIn.y = segs[6].handleOut.y = handleLength;
    segs[2].point.y = segs[5].point.y = t + radius;
    segs[2].handleOut.y = segs[5].handleIn.y = -handleLength;
}

编辑：我刚刚找到了一种使用形状更简单的方法。不确定哪种方法执行得更快。

这是使用Shape (Click here for the Sketch) 的实现。

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

Answer 2

把角的大小改成如下

  var cornerSize = circle.radius / 1;