在飞镖中计算超椭圆形状答案

【问题标题】：Calculating superellipse shape in dart在飞镖中计算超椭圆形状
【发布时间】：2019-01-02 11:32:09
【问题描述】：

我想在 Flutter 中为一个小部件创建一个超椭圆形状。

我找到了一篇关于创建用 python 和 java 编写的超椭圆的文章，但我无法让代码正常工作。

class SuperEllipse extends ShapeBorder {

  final BorderSide side;
  final double n;

  SuperEllipse({
    @required this.n,
    this.side = BorderSide.none,
  }) : assert(side != null);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);

  @override
  ShapeBorder scale(double t) {
    return SuperEllipse(
      side: side.scale(t),
      n: n,
    );
  }

  @override
    Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return _superEllipsePath(rect, n);
  }

  @override
    Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return _superEllipsePath(rect, n);
  }

  static Path _superEllipsePath(Rect rect, double n) {

    final int a = 200;
    List<double> points = [a + 1.0];
    Path path = new Path();
    path.moveTo(a.toDouble(), 0);

    // Calculate first quadrant.
    for (int x = a; x >= 0; x--) {
      points[x] = pow(pow(a, n) - pow(x, n), 1 / n);
      path.lineTo(x.toDouble(), -points[x]);
    }

    // Mirror to other quadrants.
    for (int x = 0; x <= a; x++) {
      path.lineTo(x.toDouble(), points[x]);
    }
    for (int x = a; x >= 0; x--) {
      path.lineTo(-x.toDouble(), points[x]);
    }
    for (int x = 0; x <= a; x++) {
      path.lineTo(-x.toDouble(), -points[x]);
    }

    return path;

  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    Path path = getOuterPath(rect.deflate(side.width / 2.0), textDirection: textDirection);
    canvas.drawPath(path, side.toPaint());
  }

}

我想返回正确的形状，但我得到一个异常：无效值：只有有效值是 0：200。出于某种原因，变量a 不允许为 200？不知道为什么，把它改成0不会产生任何错误，但是也没有形状。

有谁知道是否有更好的方法来做到这一点？

【问题讨论】：

见figma.com/blog/desperately-seeking-squircles
我不确定那篇文章有什么帮助...我的代码需要帮助，我了解什么是超椭圆和松鼠。
i 虽然你真的想要 n >= 4 的情况
这不是问题，问题是我在使用 Shape 时遇到异常
好的，那么你的确切堆栈跟踪是什么（3-4 个顶部帧）？

标签： math dart flutter shapes

【解决方案1】：

flutter中有一个类，叫做ContinuousRectangleBorder。

    Material(
    color: Colors.red,
    shape: ContinuousRectangleBorder(
      borderRadius: BorderRadius.circular(30.0),
    ),
    child: Container(
      padding: EdgeInsets.all(40,0),
      margin: EdgeInsets.all(8.0),
      child: Center(child: Text('Hello World')),
    ),
  )

你也可以直接在容器中使用 decoration: ShapeDecoration(shape: ContinuousRectangleBorder())

Container(
    decoration: ShapeDecoration(
      color: Colors.red,
      shape: ContinuousRectangleBorder(
        borderRadius: BorderRadius.circular(70.0),
      ),
    ),
    padding: EdgeInsets.fromLTRB(10, 40, 10, 40),
    // margin: EdgeInsets.all(8.0),
    child: Center(child: Text('Hello World')),
  )

【讨论】：

【解决方案2】：

遇到了这个会产生松鼠的包

https://pub.dev/packages/cupertino_rounded_corners

我相信您可以深入研究代码以了解它是如何形成形状的

【讨论】：