class DrawLinePainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black //画笔颜色
..strokeCap = StrokeCap.square //画笔笔触类型
..isAntiAlias = true //抗锯齿
..style = PaintingStyle.fill //画笔样式，默认是填充
..strokeWidth = 5; //画笔粗细
//是否需要重绘
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
//重写绘制内容方法
@override
void paint(Canvas canvas, Size size) {
canvas.drawLine(Offset(20.0, 20.0), Offset(100.0, 20.0), _paint);
}
}
class DrawCirclePainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 3.0
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
@override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(Offset(50.0, 50.0), 40.0, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawOvalPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke
..strokeWidth = 3.0;
@override
void paint(Canvas canvas, Size size) {
// Rect.fromPoints 使用左上角坐标和右下角坐标确定
var rect = Rect.fromPoints(Offset(100, 100), Offset(300, 200));
// Rect.fromLTRB使用左上角坐标和右下角坐标
// var rect = Rect.fromLTRB(100.0, 100.0, 300.0, 200.0);
// 使用左上角坐标和宽、高确定
// var rect = Rect.fromLTWH(100.0, 100.0, 200.0, 100.0);
// 使用圆中心坐标和半径确定圆，然后获取外切矩形
// var rect = Rect.fromCircle(center: Offset(200.0, 150.0), radius: 50.0);
//用矩形来限制椭圆的大小，椭圆为矩形的内切图形
canvas.drawOval(rect, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawRRectPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 3.0
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
var rect = Rect.fromPoints(Offset(100.0, 100.0), Offset(250.0, 250.0));
//把矩形转成圆角矩形
var rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
canvas.drawRRect(rRect, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawDRRectPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 3.0
..isAntiAlias = true
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
//需要先画大的，再画小的
var rect1 = Rect.fromCircle(center: Offset(150, 150.0), radius: 70.0);
var rect2 = Rect.fromCircle(center: Offset(150.0, 150.0), radius: 50.0);
var rRect1 = RRect.fromRectAndRadius(rect1, Radius.circular(20.0));
var rRect2 = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));
//画嵌套矩形
canvas.drawDRRect(rRect1, rRect2, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawPointsPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 20.0
..isAntiAlias = true
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
//PointMode.points 点
//PointMode.lines 隔点连接线线
//PointMode.polygon 相邻连接线线
canvas.drawPoints(
PointMode.polygon,
[
Offset(20.0, 20.0),
// Offset(50.0, 50.0),
// Offset(80.0, 80.0),
Offset(80.0, 40.0),
Offset(110.0, 110.0),
Offset(150.0, 200.0),
],
_paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawArcPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 2.0
..isAntiAlias = true
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
const PI = 3.1415926;
var rect1 = Rect.fromCircle(center: Offset(70, 70), radius: 100);
canvas.drawArc(rect1, 0, PI / 2, true, _paint);
var rect2 = Rect.fromCircle(center: Offset(200, 200), radius: 80);
canvas.drawArc(rect2, 0, PI, true, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class DrawPathPainter extends CustomPainter {
var _paint = Paint()
..color = Colors.black
..strokeWidth = 2.0
..isAntiAlias = true
..strokeCap = StrokeCap.square
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
var path = Path();
path.moveTo(100.0, 100.0);
path.lineTo(200, 250);
path.lineTo(300, 280);
path.lineTo(250, 100);
canvas.drawPath(path, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
child: SizedBox(
width: 500.0,
height: 300.0,
child: CustomPaint(
painter: painter,
),
),
),
MyRowText("画线", () =>
setState(() {
painter = DrawLinePainter();
})
),
MyRowText("画圆", () =>
setState(() {
painter = DrawCirclePainter();
})
),
MyRowText("画椭圆", () =>
setState(() {
painter = DrawOvalPainter();
})
),
MyRowText("画圆角矩形", () =>
setState(() {
painter = DrawRRectPainter();
})
),
MyRowText("画双矩形", () =>
setState(() {
painter = DrawDRRectPainter();
})
),
MyRowText("画点", () =>
setState(() {
painter = DrawPointsPainter();
})
),
MyRowText("画扇形", () =>
setState(() {
painter = DrawArcPainter();
})
),
MyRowText("画路径", () =>
setState(() {
painter = DrawPathPainter();
})
),
],
),
)
网友评论