![](/img/trans.png)
[英]Is there an alternative for an elevation property for CustomPaint widget in flutter?
[英](Flutter) Curved edge to a CustomPaint Widget
這就是我想要構建的:
( appBar
的形狀而不是內容)
這就是我所擁有的:
我希望邊緣是彎曲的,而不是那么鋒利。
這是我的CustomPaint
代碼:
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
var path = Path();
path.lineTo(0, size.height - size.height / 5);
path.lineTo(size.width / 1.2, size.height);
path.lineTo(size.width, size.height - size.height / 5);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
我如何實現這種彎曲的邊緣?
我嘗試過point.arcToPoint()
和point.quadraticBezierTo()
,但沒有成功。
這並不完美,但您可以稍微調整一下數字:
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
var path = Path();
path.lineTo(0, size.height - size.height / 5);
path.lineTo(size.width / 1.2, size.height);
//Added this line
path.relativeQuadraticBezierTo(15, 3, 30, -5);
path.lineTo(size.width, size.height - size.height / 5);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
你可以這樣做
class LogoPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.blue;
Path path = new Path();
path.lineTo(0, size.height - size.height / 5);
//Use the method conicTo
path.conicTo(size.width / 1.2, size.height, size.width,
size.height - size.height / 5, 15);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.