第11章组件装饰和视觉效果-CustomPainter自定义画板-绘制多个点
防采集标记:亢少军老师的课程和资料
import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'CustomPaint绘制多个点示例',
home: Scaffold(
appBar: AppBar(
title: Text(
'CustomPaint绘制多个点示例',
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: SizedBox(
width: 500.0,
height: 500.0,
child: CustomPaint(
painter: LinePainter(),
),
)),
),
);
}
}
//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {
//定义画笔
Paint _paint = new Paint()
..color = Colors.grey
..strokeCap = StrokeCap.round//StrokeCap.round为圆点 StrokeCap.square为方形
..isAntiAlias = true
..strokeWidth = 20.0//画笔粗细 值调大点 这样点看起来明显一些
..style = PaintingStyle.fill; //用于绘制点时PaintingStyle值无效
///重写绘制内容方法
@override
void paint(Canvas canvas, Size size) {
//绘制点
canvas.drawPoints(
///PointMode的枚举类型有三个,points点,lines隔点连接线,polygon相邻连接线
PointMode.points,
[
Offset(50.0, 60.0),
Offset(40.0, 90.0),
Offset(100.0, 100.0),
Offset(300.0, 350.0),
Offset(400.0, 80.0),
Offset(200.0, 200.0),
],
_paint..color = Colors.grey);
}
///是否需要重绘
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
- Flutter技术入门与实战: http://product.dangdang.com/26485813.html
- Flutter交流学习群:894109159
- Flutter开源项目请关注: https://github.com/kangshaojun
- Flutter****:https://edu.****.net/lecturer/2436
@作者: 亢少军