Flutter 使用 CustomPainter 绘制心形

Question

我想知道是否有人对如何开始使用 CustomPainter 在 flutter 中绘制心形有任何指示。我已经设法画出三角形和正方形或基本圆之类的东西，但是心当然有直线和曲线。

我有这个画三角形的，有点像心形，但是不知道心形需要的曲线怎么画。

class Heart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomPaint(
        painter: TrianglePainter(
          strokeColor: Color(0xFFF27788),
          paintingStyle: PaintingStyle.fill,
        ),
        child: Container(
          height: 60 * Dep.hr,
          width: 60 * Dep.hr,
        ),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  final Color strokeColor;
  final PaintingStyle paintingStyle;
  final double strokeWidth;

  TrianglePainter({this.strokeColor, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = strokeColor
      ..strokeWidth = strokeWidth
      ..style = paintingStyle;

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    return Path()
      ..moveTo(y, 0)
      ..lineTo(0, 0)
      ..lineTo(x / 2, y);
  }

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return oldDelegate.strokeColor != strokeColor ||
        oldDelegate.paintingStyle != paintingStyle ||
        oldDelegate.strokeWidth != strokeWidth;
  }
}

它也只是一块颜色，但我真的也需要在形状周围加一个边框。这是我的预期输出，不知道是不是一厢情愿

Answer 1

试试这个：

  class HeartWidget extends StatefulWidget {
    @override
    _HeartWidgetState createState() => _HeartWidgetState();
  }

  class _HeartWidgetState extends State<HeartWidget> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Testing'),
        ),
        body: Center(
        child: CustomPaint(
            size: Size(70, 80),
            painter: HeartPainter(),
          ),
        ),
      );
    }
  }

  class HeartPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
      // TODO: implement paint
      Paint paint = Paint();
      paint
        ..color = Colors.black
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.round
        ..strokeWidth = 6;

      Paint paint1 = Paint();
      paint1
        ..color = Colors.red
        ..style = PaintingStyle.fill
        ..strokeWidth = 0;

      double width = size.width;
      double height = size.height;

      Path path = Path();
      path.moveTo(0.5 * width, height * 0.35);
      path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,
          0.5 * width, height);
      path.moveTo(0.5 * width, height * 0.35);
      path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,
          0.5 * width, height);

      canvas.drawPath(path, paint1);
      canvas.drawPath(path, paint);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
      return true;
    }
  }

Flutter 使用 CustomPainter 绘制心形

Flutter drawing a heart shape with CustomPainter

custom-painting

dart

flutter