将圆角矩形变换为圆

Question

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

- ＆gt;

动画需要流畅。由于我正在使用的矩形数量很高，我不能使用“删除当前舍入的矩形并重绘一个更圆的版本”方法。它降低了性能，动画变得迟钝。

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

    31/08/2017;

准备此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;