Flutter：如何画星星

Question

I am trying to paint a star in my flutter app. This one:

I tried to do this:

Path getClip(Size size) {
Path path = Path() // Start from (0,0)
  ..moveTo(size.width / 2, 0)
  ..quadraticBezierTo(size.width / 2, 0, 0, size.height / 2)
  ..quadraticBezierTo(
      size.width / 2, size.height / 2, size.width / 2, size.height)
  ..quadraticBezierTo(
      size.width / 2, size.height, size.width, size.height / 2)
  ..quadraticBezierTo(
      size.width / 2, size.height, size.width, size.height / 2)
  ..close();
return path;

}

but it render like this:

How can I do to render like the first pifcture?

Answer 1

Here is the path for star like this

class StarPainter extends CustomPainter {
  StarPainter({this.color});
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    double sh = size.height;
    double sw = size.width;

    final paint = Paint()
      ..color = color ?? Colors.blue
      ..style = PaintingStyle.fill;

    Path path = Path()
      ..moveTo(sw / 2, 0)
      ..quadraticBezierTo(sw / 2, sh / 2, sw, sh / 2)
      ..quadraticBezierTo(sw / 2, sh / 2, sw / 2, sh)
      ..quadraticBezierTo(sw / 2, sh / 2, 0, sh / 2)
      ..quadraticBezierTo(sw / 2, sh / 2, sw / 2, 0);

    canvas.drawPath(path, paint);
  }

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

code to reproduce:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomPaint(
                painter: StarPainter(),
                child: Container(
                  alignment: Alignment.center,
                  width: 250,
                  height: 250,
                  child: Text(
                    '1',
                    style: TextStyle(
                        fontSize: 48,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

Wit 2 control points cubicTo can make a shape more like a spark:

double sh = size.height;
double sw = size.width;
double dx = 0.15;
double dy = 0.1;

Path path = Path()
  ..moveTo(sw / 2, 0)      
  ..cubicTo(sw * (0.5+dx), sh * (0.5-dy), sw * (0.5+dy) , sh * (0.5-dx), sw, sh / 2)
  ..cubicTo(sw * (0.5+dy), sh * (0.5+dx), sw * (0.5+dx) , sh * (0.5+dy), sw / 2, sh)
  ..cubicTo(sw * (0.5-dx), sh * (0.5+dy), sw * (0.5-dy) , sh * (0.5+dx), 0, sh / 2)
  ..cubicTo(sw * (0.5-dy), sh * (0.5-dx), sw * (0.5-dx) , sh * (0.5-dy), sw / 2, 0);