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

此外，它只是一个纯色块，但我真的需要在形状周围加上边框。这是我的期望输出，不确定是否为痴心妄想。

- Hasen

---

使用drawArc()函数在CustomPainter中绘制曲线。 - Son of Stackoverflow

Dep.hr 是什么？ - ÄR Âmmãř Żąîñh

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

- Amit Prajapati

---

哇！太棒了。我现在要试一下。谢谢。 - Hasen

太棒了，它运行得非常好。你是怎么学习custompainter的？我找不到太多关于它的教材，主要只有基本形状如正方形和圆形 - 没有更深入的内容。 - Hasen

根据我的经验，我曾经尝试过与您分享我的代码，以满足您的需求。在我的情况下，我不需要那个边框，我会自己绘制它，但最好的选择是在Google上搜索CustomPainter。 - Amit Prajapati

嗯，我确实谷歌过了，但只找到了我说的内容。不管怎样，感谢你的帮助。 - Hasen