Flutter：如何使用 CustomPaint 绘制心形(1)

1.通过扩展CustomPainter类来实现一个画笔：

class MyPainter extends CustomPainter {

// The color of the heart

final Color bodyColor;

// The color of the border of the heart

final Color borderColor;

// The thickness of the border

final double borderWith;

MyPainter(this.bodyColor, this.borderColor, this.borderWith);

@override

void paint(Canvas canvas, Size size) {

// The body of the heart

final Paint body = Paint();

body

…color = bodyColor

…style = PaintingStyle.fill

…strokeWidth = 0;

// The border of the heart

final Paint border = Paint();

border

…color = borderColor

…style = PaintingStyle.stroke

…strokeCap = StrokeCap.round

…strokeWidth = borderWith;

final double width = size.width;

final double height = size.height;

final Path path = Path();

path.moveTo(0.5 * width, height * 0.4);

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.4);

path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,

0.5 * width, height);

canvas.drawPath(path, body);

canvas.drawPath(path, border);

}

2.使用 CustomPaint 小部件和我们之前创建的画家绘制心形：

// Non-border heart

CustomPaint(

size: const Size(280, 260