我正在尝试使用Flutter customPainter库绘制下面的图片。如何绘制此形状?
我的代码和结果
import 'package:flutter/material.dart';
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = new Paint();
paint.color = Colors.green[800];
paint.style = PaintingStyle.fill;
var path = new Path();
path.lineTo(0, size.height * 0.3);
path.quadraticBezierTo(size.width * 0.35, size.height * 0.4, size.width * 0.7, size.height * 0.21);
path.quadraticBezierTo(size.width * 0.6, size.height * 0.19, size.width * 0.9, size.height * 0.15);
path.quadraticBezierTo(size.width , size.height * 0.05, size.width * 0.6, 0);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
您选择的贝塞尔曲线不是正确的曲线。
在此说明在哪里应用了哪些曲线。黄点是起点和终点,黑点代表控制点。在代码中,我从左到右(从上到下)使用arcToPoint
而不是conicTo
,因为它可以更好地工作。请注意,arcToPoint
也会绘制圆锥曲线。
这只是一个草图,即比例已完全关闭,但至少我可以共享适当的贝塞尔曲线,以便获得所需的输出。] >
@override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.red[800] ..style = PaintingStyle.fill; final path = new Path() ..moveTo(size.width * .6, 0) ..quadraticBezierTo( size.width * .7, size.height * .08, size.width * .9, size.height * .05, ) ..arcToPoint( Offset( size.width * .93, size.height * .15, ), radius: Radius.circular(size.height * .05), largeArc: true, ) ..cubicTo( size.width * .6, size.height * .15, size.width * .5, size.height * .46, 0, size.height * .3, ) ..lineTo(0, 0) ..close(); canvas.drawPath(path, paint); }
注意,我更新了语法,以使用
..
级联表示法和final
关键字作为变量。