I'm using CustomPainter
to create a triangle. I want to create a triangle with a border .
My PaintTriangle class:
class PaintTriangle extends CustomPainter {
final Color backgroundColor;
PaintTriangle({
required this.backgroundColor,
});
@override
void paint(Canvas canvas, Size size) {
final y = size.height;
final x = size.width;
final paint = Paint()..color = backgroundColor;
final path = Path()
..moveTo(0, y)
..lineTo((x / 2), (y / y))
..lineTo(x, y);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
You can draw another paint on canvas.
class PaintTriangle extends CustomPainter {
final Color backgroundColor;
final Color borderColor;
final double borderThickness;
PaintTriangle(
{required this.backgroundColor,
required this.borderColor,
this.borderThickness = 4.0});
@override
void paint(Canvas canvas, Size size) {
final y = size.height;
final x = size.width;
final paint = Paint()..color = backgroundColor;
final path = Path()
..moveTo(0, y)
..lineTo((x / 2), (y / y))
..lineTo(x, y)
..lineTo(0, y); //little modification to draw bottom
final borderPaint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderThickness;
canvas.drawPath(path, paint);
canvas.drawPath(path, borderPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
And use
CustomPaint(
size: Size(200, 200),
painter: PaintTriangle(
backgroundColor: Colors.blue,
borderColor: Colors.red,
),
),
Result
you will need to make another Custom Painter for the border with the same path as the triangle.
this link will answer your question
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.