//自定义 坐标
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),
),
同理。多边形也是如此。