CustomPaint
介绍:
一个小部件，它提供了一个画布，在绘制阶段可以在上面绘制
继承关系:
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > CustomPaint
继承自SingleChildRenderObjectWidget的控件,不能用setState的方式来刷新它
构造方法:
CustomPaint({Key key, CustomPainter painter, CustomPainter foregroundPainter, Size size: Size.zero, bool isComplex: false, bool willChange: false, Widget child })
常用属性:
foregroundPainter → CustomPainter 用来绘制前景的工具
painter → CustomPainter 绘制工具
isComplex → bool 是否需要cache
size → Size 画布大小
willChange → bool 是否需要cache
child → Widget 一般不写
代码示例:
class CustomPaintSample extends CustomPainter {
//绘制流程
@override
void paint(Canvas canvas, Size size) {
Paint p = new Paint();
p.color = Colors.blue;//画笔颜色
p.isAntiAlias = true;//是否抗锯齿
p.style = PaintingStyle.fill;//画笔样式:填充
canvas.drawCircle(size.center(Offset(0.0, 0.0)), size.width / 2, p);
}
//刷新布局的时候告诉flutter 是否需要重绘
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
效果:
拓展:
Flutter中Paint和Canvas和Android中的其实非常类似,也是画笔和画布,通过CustomPainter衔接使用,实现paint()绘制方法和shouldRepaint()在刷新布局时是否需要重绘.
Paint:
介绍:
在画布上绘画时使用的样式描述,Canvas上的大多数api都使用一个Paint对象来描述用于该操作的样式。
常用属性:
blendMode ↔ BlendMode 颜色混个模式
color ↔ Color 画笔颜色
colorFilter ↔ ColorFilter 颜色渲染模式,一般是矩阵效果来改变
filterQuality ↔ FilterQuality 颜色渲染模式质量:高、中、低
invertColors ↔ bool
isAntiAlias ↔ bool 是否抗锯齿
maskFilter ↔ MaskFilter 模糊折照效果: nomal内外模糊;solid:内部填充外部模糊;outer内部透明外边模糊;inner:内部模糊,外边正常;
shader ↔ Shader 着色器,绘制渐变效果
strokeCap ↔ StrokeCap 笔触线帽类型:round、butt、square 包括三种类型:默认为butt即初始点到终止点;square:在初始点与终止点绘制一个方块;round:在初始点与终止点绘制一个圆角
strokeJoin ↔ StrokeJoin 线结合处:锐角、圆弧
、直线
strokeMiterLimit ↔ double
strokeWidth ↔ double 画笔粗细
style ↔ PaintingStyle 画笔样式,填充、描边;PaintingStyle.fill:填充 PaintingStyle.stroke为描边
Canvas
介绍:
用于记录图形化操作的接口。理解为画布,画布是一个矩形区域,可以绘制;
canvas拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法;
常用API:
drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) → void 绘制弧、饼
drawAtlas(Image atlas, List
drawCircle(Offset c, double radius, Paint paint) → void 绘制圆形,仅需设置原点及半径
drawColor(Color color, BlendMode blendMode) → void 绘制背景颜色 俩个参数:第一个为色值,第二个为混合模式
drawDRRect(RRect outer, RRect inner, Paint paint) → void 绘制嵌套矩形,第一个参数:外部矩形,第二个参数内部矩形,最后一个参数为paint画笔
drawImage(Image image, Offset p, Paint paint) → void 将图片绘制到画布中
drawLine(Offset p1, Offset p2, Paint paint) → void 绘制线
drawOval(Rect rect, Paint paint) → void 绘制椭圆
drawPaint(Paint paint) → void 用画笔填充
drawParagraph(Paragraph paragraph, Offset offset) → void 绘制文字
drawPath(Path path, Paint paint) → void 绘制路径 drawPath 常用方法:
moveTo():当前坐标点开始
lineTo():起点绘制到设置的新起点
close():点到点的连接
reset():重置,清空连线
addRect():添加矩形连线
addOval():添加弧线
drawPoints(PointMode pointMode, List
drawRect(Rect rect, Paint paint) → void绘制矩形
drawRRect(RRect rrect, Paint paint) → void 绘制圆角矩形
drawShadow(Path path, Color color, double elevation, bool transparentOccluder) → void 绘制阴影