Flutter-绘制学习-基本的认识一
站长
· 阅读数 5
纸: Canvas 画布对象
笔: Paint 画笔对象
形: Path 路径对象
色: Color 颜色对象
2、搭建绘话的舞台
CustomPaint组件
CustomPaint 组件可以用来显示绘制出的东西。需要传入 CustomPainter 对象。
自定义 PaperPainter 类继承 CustomPainter。 在其中的paint方法中可以拿到的画布Canvas。
绘制一个圆
void main() {
WidgetsFlutterBinding.ensureInitialized(); // 确定初始化
SystemChrome.setPreferredOrientations(// 使设备横屏显示
[DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
SystemChrome.setEnabledSystemUIOverlays([]); // 全屏显示
runApp(Paper());
}
///位置 p01/s01_pure/paper.dart
import 'package:flutter/material.dart';
class Paper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(),
),
);
}
}
/// 继承 CustomPainter类
class PaperPainter extends CustomPainter {
@override // paint方法
void paint(Canvas canvas, Size size) {
// TODO: implement paint
/// 画笔对象
final Paint paint = Paint();
/// 在画布绘制圆，drawCircle方法是绘制圆，三个参数：圆心<drawCircle>，半径<10>, paint 画笔
canvas.drawCircle(Offset(100, 100), 10, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
效果
三、简单认识绘制对象 API
[1]. 整体认识一下 [Canvas] 的绘制 API
[2]. 整体认识一下 [Paint] 对象可设置的属性
[3]. 整体认识一下 [Path] 对象可执行的操作
1、Canvas 方法 :
---->[画布状态]----
void save()
void saveLayer(Rect bounds, Paint paint)
void restore()
int getSaveCount()
---->[画布变换]----
void skew(double sx, double sy)
void rotate(double radians)
void scale(double sx, [double sy])
void translate(double dx, double dy)
void transform(Float64List matrix4)
---->[画布裁剪]----
void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true })
void clipRRect(RRect rrect, {bool doAntiAlias = true})
void clipPath(Path path, {bool doAntiAlias = true})
---->[画布绘制--点相关]----
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawLine(Offset p1, Offset p2, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, Paint paint)
---->[画布绘制--矩形相关]----
void drawRect(Rect rect, Paint paint)
void drawRRect(RRect rrect, Paint paint)
void drawDRRect(RRect outer, RRect inner, Paint paint)
---->[画布绘制--类圆相关]----
void drawOval(Rect rect, Paint paint)
void drawCircle(Offset c, double radius, Paint paint)
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
---->[画布绘制--图片相关]----
void drawImage(Image image, Offset p, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
void drawAtlas(Image atlas,List<RSTransform> transforms,List<Rect> rects,List<Color> colors,BlendMode blendMode,Rect cullRect,Paint paint)
void drawRawAtlas(Image atlas,Float32List rstTransforms,Float32List rects,Int32List colors,BlendMode blendMode,Rect cullRect,Paint paint)
---->[画布绘制--文字]----
void drawParagraph(Paragraph paragraph, Offset offset)
---->[画布绘制--其他]----
void drawColor(Color color, BlendMode blendMode)
void drawPath(Path path, Paint paint)
void drawPaint(Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)
void drawPicture(Picture picture)
2、 Paint(画笔) 属性
isAntiAlias(抗锯齿) color(颜色) blendMode(混合模式) style(画笔样式)
strokeWidth(线宽) strokeCap(线帽类型) strokeJoin(线接类型) strokeMiterLimit(斜接限制)
maskFilter(遮罩滤镜) shader(着色器) colorFilter(颜色滤镜) imageFilter(图片滤镜)
invertColors(是否反色) filterQuality(滤镜质量)
3、Path 方法
---->[路径绝对移动]----
void moveTo(double x, double y)
void lineTo(double x, double y)
void quadraticBezierTo(double x1, double y1, double x2, double y2)
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void conicTo(double x1, double y1, double x2, double y2, double w)
void arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)
void arcToPoint(Offset arcEnd, {Radius radius = Radius.zero, double rotation = 0.0, bool largeArc = false, bool clockwise = true,})
---->[路径相对移动]----
void relativeMoveTo(double dx, double dy)
void relativeLineTo(double dx, double dy)
void relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)
void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void relativeConicTo(double x1, double y1, double x2, double y2, double w)
void relativeArcToPoint(Offset arcEndDelta, { Radius radius = Radius.zero, double rotation = 0.0, bool largeArc = false, bool clockwise = true, })
---->[路径添加]----
void addRect(Rect rect)
void addRRect(RRect rrect)
void addOval(Rect oval)
void addArc(Rect oval, double startAngle, double sweepAngle)
void addPolygon(List<Offset> points, bool close)
void addPath(Path path, Offset offset, {Float64List matrix4})
void extendWithPath(Path path, Offset offset, {Float64List matrix4})
---->[路径操作]----
void close()
void reset()
bool contains(Offset point)
Path shift(Offset offset)
Path transform(Float64List matrix4)
Rect getBounds()
set fillType(PathFillType value)
static Path combine(PathOperation operation, Path path1, Path path2)
PathMetrics computeMetrics({bool forceClosed = false})
///位置 p02/s02_simple/paper.dart
import 'package:flutter/material.dart';
class Paper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(),
),
);
}
}
class PaperPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final Paint paint = Paint();
/// 画笔设置
paint
..color = Colors.blue // 颜色 蓝色
..strokeWidth = 4 // 线宽 4
..style = PaintingStyle.stroke; // 样式
/// 绘制线 两点 加 画笔的设置
canvas.drawLine(Offset(0, 0), Offset(100, 100), paint);
Path path = Path(); // 路劲
path.moveTo(100, 100);
path.lineTo(200, 0);
/// 绘制路径
canvas.drawPath(path, paint..color = Colors.red);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
效果：
初认识，结束