CustomPaint
介紹:
一個小部件，它提供了一個畫布脆烟，在繪制階段可以在上面繪制
繼承關(guān)系:
Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > CustomPaint
繼承自SingleChildRenderObjectWidget的控件,不能用setState的方式來刷新它
構(gòu)造方法:
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銜接使用,實現(xiàn)paint()繪制方法和shouldRepaint()在刷新布局時是否需要重繪.
Paint:
介紹:
在畫布上繪畫時使用的樣式描述,Canvas上的大多數(shù)api都使用一個Paint對象來描述用于該操作的樣式。
常用屬性:
blendMode ? BlendMode 顏色混個模式
color ? Color 畫筆顏色
colorFilter ? ColorFilter 顏色渲染模式,一般是矩陣效果來改變
filterQuality ? FilterQuality 顏色渲染模式質(zhì)量:高磕瓷、中螺句、低
invertColors ? bool
isAntiAlias ? bool 是否抗鋸齒
maskFilter ? MaskFilter 模糊折照效果: nomal內(nèi)外模糊;solid:內(nèi)部填充外部模糊;outer內(nèi)部透明外邊模糊;inner:內(nèi)部模糊,外邊正常;
shader ? Shader 著色器,繪制漸變效果
strokeCap ? StrokeCap 筆觸線帽類型:round、butt敌蚜、square 包括三種類型:默認為butt即初始點到終止點;square:在初始點與終止點繪制一個方塊;round:在初始點與終止點繪制一個圓角
strokeJoin ? StrokeJoin 線結(jié)合處:銳角、圓弧
窝爪、直線
strokeMiterLimit ? double
strokeWidth ? double 畫筆粗細
style ? PaintingStyle 畫筆樣式,填充弛车、描邊;PaintingStyle.fill:填充 PaintingStyle.stroke為描邊
Canvas
介紹:
用于記錄圖形化操作的接口。理解為畫布,畫布是一個矩形區(qū)域,可以繪制;
canvas擁有多種繪制點蒲每、線纷跛、路徑、矩形邀杏、圓形贫奠、以及添加圖像的方法;
常用API:
drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) → void 繪制弧、餅
drawAtlas(Image atlas, List<RSTransform> transforms, List<Rect> rects, List<Color> colors, BlendMode blendMode, Rect cullRect, Paint paint) → void 繪制地圖使用
drawCircle(Offset c, double radius, Paint paint) → void 繪制圓形,僅需設(shè)置原點及半徑
drawColor(Color color, BlendMode blendMode) → void 繪制背景顏色 倆個參數(shù):第一個為色值,第二個為混合模式
drawDRRect(RRect outer, RRect inner, Paint paint) → void 繪制嵌套矩形,第一個參數(shù):外部矩形,第二個參數(shù)內(nèi)部矩形,最后一個參數(shù)為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():起點繪制到設(shè)置的新起點
close():點到點的連接
reset():重置,清空連線
addRect():添加矩形連線
addOval():添加弧線
drawPoints(PointMode pointMode, List<Offset> points, Paint paint) → void 繪制點、線
drawRect(Rect rect, Paint paint) → void繪制矩形
drawRRect(RRect rrect, Paint paint) → void 繪制圓角矩形
drawShadow(Path path, Color color, double elevation, bool transparentOccluder) → void 繪制陰影
