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

//自定义 坐标
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;
1

}
}

使用：
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),
),

同理。多边形也是如此。