在飞镖中计算超椭圆形状

Question

我想在 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());
  }

}

我想 return 正确的形状，但我得到一个异常：无效值：唯一有效值是 0: 200。出于某种原因，变量 a 不允许为 200？不知道为什么，改成0也没有报错，但是也没有形状了

有人知道是否有更好的方法吗？

Answer 1

遇到这个产生松鼠的包

https://pub.dev/packages/cupertino_rounded_corners

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

Answer 2

在flutter中有一个class，叫做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')),
    ),
  )

你也可以直接在带有装饰的容器中使用它：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')),
  )

在飞镖中计算超椭圆形状

Calculating superellipse shape in dart

math

shapes

dart

flutter