问用CustomPainter绘制心形图
EN

Stack Overflow用户

提问于 2019-09-02 12:07:59

回答 1查看 2.4K关注 0票数 4

我想知道是否有人有任何关于如何开始使用CustomPainter绘制心形的建议。我已经画出了像三角形和正方形这样的东西，或者是一个基本的圆，但是心当然有直线和曲线。

我用这个画了一个三角形，看起来有点像一颗心，但不知道如何画出心所需的曲线。

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

此外，这只是一个颜色块，但我真的需要一个边界周围的形状。这是我的预期输出，不确定它是否是如意算盘。

dart

custom-painting

flutter

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-02 13:01:22

试试这个：

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