flutter CustomPainter 简单绘制三角形多边形

最新推荐文章于 2025-06-22 22:42:49 发布

刘文_

最新推荐文章于 2025-06-22 22:42:49 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： flutter成长文章标签： flutter 简单绘制多边形

本文链接：https://blog.youkuaiyun.com/qq_36071410/article/details/89142097

flutter成长专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍如何在Flutter中使用自定义坐标系统绘制三角形，包括创建坐标类、实现CustomPainter绘制过程，以及如何填充颜色。同时，文章还介绍了如何使用相同原理绘制多边形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//自定义坐标
class Coordinate {
final double cx;
final double cy;
Coordinate({this.cx, this.cy});
}

//绘制三角形。绘制的过程。是三个点依次线连接然后填充。点的坐标是相对父布局坐标而不是绝对坐标（传统意义上的屏幕左上角）
效果图：
在这里插入图片描述
三角形代码：
class TriangleCustomPainter extends CustomPainter {
Paint _paint = new Paint();//画笔富含各种属性方法。仔细查看源码
final BuildContext context;
final List spots;
final Color color;

TriangleCustomPainter(this.context, this.spots, {this.color});

@override
void paint(Canvas canvas, Size size) {
Path path = new Path()…moveTo(spots[0].cx, spots[0].cy);
path.lineTo(spots[1].cx, spots[1].cy);
path.lineTo(spots[2].cx, spots[2].cy);
canvas.drawPath(
path,
_paint
…style = PaintingStyle.fill
…color = color);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}
}

使用：
List leftSpots = new List(3);
leftSpots[0] = Coordinate(cx: 10, cy: 0);
leftSpots[1] = Coordinate(cx: 22, cy: 6);
leftSpots[2] = Coordinate(cx: 22, cy: -6);
CustomPaint(
painter: new TriangleCustomPainter(context, leftSpots,
color: Colors.red),
),

同理。多边形也是如此。