我想知道如何使用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;
}
}
此外,它只是一个纯色块,但我真的需要在形状周围加上边框。这是我的期望输出,不确定是否为痴心妄想。