Flutter自定义绘制（1）- 绘制基础

时间  2019-11-06
标签 flutter 自定义 绘制 基础 繁體版
原文   原文链接

CustomPainter

Flutter 中实现绘制的主要是CustomPainter类、html

咱们通常继承这个类,来使用它；git

class MyPainter extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return null;
  }

}复制代码

而后放在父控件的child里用CustomPaint包裹github

child:  new CustomPaint(
    size: new Size(200,200),
    painter: new MyPainter())复制代码

故事的开始：paint()

自定义绘制很是简单，建立好 Paint 对象，重写 paint()，绘制代码放在paint()里面，大概就是这样：canvas

Paint _paint = Paint()
  ..color = Colors.amber //画笔颜色
  ..strokeCap = StrokeCap.round //画笔笔触类型
  ..isAntiAlias = true //是否启动抗锯齿
  ..strokeWidth = 15.0; //画笔的宽度

@override
void paint(Canvas canvas, Size size) {
  // 画个实心圆
  canvas.drawCircle(new Offset(200, 200), 100, _paint);
}复制代码



Canvas和Paint基础

Canvas.drawXXX() 系列方法和 Paint 的基础掌握了，就可以进行简单的绘制需求。bash

  1. Canvas 类下的全部 draw- 开头的方法，例如 drawCircle() drawArc()
  2. Paint 的初始化

    Paint _paint = Paint()
  ..color = Colors.deepOrange//画笔颜色
  ..strokeCap = StrokeCap.round //画笔笔头类型
  ..isAntiAlias = true //是否开启抗锯齿
  ..blendMode = BlendMode.src//颜色混合模式
  ..style = PaintingStyle.fill //画笔样式，默认为填充
  ..colorFilter = ColorFilter.mode(Colors.blueAccent,
      BlendMode.src) //颜色渲染模式
  ..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果
  ..filterQuality = FilterQuality.high //颜色渲染模式的质量
  ..strokeWidth = 5.0; //画笔的宽度复制代码

好了，基础介绍完了，你们能够直接点击下方，打开Flutter官方文档查看原汁原味的资料哦async

这篇文章到这里就能够关闭了，嘻嘻。ide


如下结合示例说说主要方法的使用动画

填充颜色 - drawColor(Color color, BlendMode blendMode) 

这个方法通常用于画板底色填充及蒙版（使用蒙版时要注意图片混合模式设为BlendMode.srcOver）ui

canvas.drawColor(Color.fromARGB(80, 255, 0, 0), BlendMode.srcOver);复制代码



画圆 - drawCircle(Offset c, double radius, Paint paint)

第一个参数 c 是圆心点的坐标，直接new一个Offset出来填入x,y坐标就完事了，第二个参 radius 是圆的半径，paint没必要多说；spa

canvas.drawCircle(new Offset(200, 200), 100, _paint);复制代码


坐标系是以控件左上角开始的，跟初中学的坐标系可不同；


画矩形 - drawRect(Rect rect, Paint paint)

canvas.drawRect(new Rect.fromLTWH(10, 50, 50, 50),_paint);
_paint.style = PaintingStyle.stroke; // 中途将画笔风格设为环形
canvas.drawRect(new Rect.fromLTWH(120, 50, 50, 50),_paint);复制代码

效果以下：



画点 - drawPoints(PointMode pointMode, List points, Paint paint) 

第一个参数是点的模式，分三种

  • PointMode.points 
  • PointMode.lines 
  • PointMode.polygon 

第二个参数是一个点的集合，第三个参数...emmm,好了话很少说，上图

PointMode.points - 点模式

List<Offset> points = new List();
points.add(new Offset(100, 100));
points.add(new Offset(125, 200));
points.add(new Offset(50, 150));
points.add(new Offset(150, 150));
points.add(new Offset(75, 200));
canvas.drawPoints(PointMode.points, points, _paint);复制代码


PointMode.lines - 情侣模式

canvas.drawPoints(PointMode.points, points, _paint);复制代码


咦，我左下角的点呢？哦，原来这个模式没有配对的小点点会被删除，呜呜呜，单身狗没人权的嘛？

PointMode.polygon - 连线模式

canvas.drawPoints(PointMode.polygon, points, _paint);复制代码



画椭圆 - drawOval(Rect rect, Paint paint) 

这个方法和drawRect()是一毛同样的，只不过一个画的是矩形，一个是椭圆

canvas.drawOval(new Rect.fromLTWH(50, 50, 100, 50), _paint);
_paint.style = PaintingStyle.stroke;
canvas.drawOval(new Rect.fromLTWH(170, 50, 100, 50), _paint);复制代码



画一条直线 - drawLine(Offset p1, Offset p2, Paint paint) 

p1线的起点，p2线的终点

canvas.drawLine(new Offset(100, 100), new Offset(200, 200), _paint);复制代码


Flutter并无提供画多条线的方法，只能多写几回 drawLine() 或者使用 drawPoints() 的情侣模式


画圆角矩形 - drawRRect(RRect rrect, Paint paint)

canvas.drawRRect(new RRect.fromLTRBR(50, 50, 200, 100, new Radius.circular(10.0)), _paint);
canvas.drawRRect(new RRect.fromLTRBR(50, 150, 200, 250, new Radius.elliptical(10.0, 30.0)), _paint);复制代码


下面这个矩形看似纵向拉伸过了，其实没有，只是圆角模式是 elliptical （椭圆）


画矩形环 - drawDRRect(RRect outer, RRect inner, Paint paint)  

第一个参数的区域必须包括第二个参数的区域,不然没法显示；

canvas.drawDRRect(new RRect.fromLTRBR(50, 50, 200, 100, new Radius.circular(10.0)),
    new RRect.fromLTRBR(60, 60, 190, 90, new Radius.circular(10.0)), _paint);复制代码



画圆弧或扇形 - drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

第一个参数仍然是一块矩形区域，第二个参数 startAngle 与第三个参数 sweepAngle 须要注意是弧度制，要转化一下  乘以个  (pi / 180.0) 就好了度（下图中红线是 0 度的位置；顺时针为正角度，逆时针为负角度），第四个参数 useCenter 表明是否与圆心链接，

canvas.drawArc(new Rect.fromLTWH(50, 50, 100, 50), 0.0 * (pi / 180.0), 90 * (pi / 180.0), false, _paint);
canvas.drawArc(new Rect.fromLTWH(50, 50, 100, 50), 200.0* (pi / 180.0), 90 * (pi / 180.0), true, _paint);
_paint.style = PaintingStyle.stroke; // 画线模式
canvas.drawArc(new Rect.fromLTWH(50, 50, 100, 50), 100.0* (pi / 180.0), 90 * (pi / 180.0), false, _paint);复制代码


以上就是 Canvas 全部的简单图形的绘制。除了简单图形的绘制， Canvas 还可使用drawPath(Path path, Paint paint)来绘制自定义图形。


画路径 - drawPath(Path path, Paint paint) 

这个方法经过描述路径的方式来绘制图形，用法大概是这样：

Path _path = Path();
  @override
  void paint(Canvas canvas, Size size) {
    _paint.style = PaintingStyle.stroke; // 画线模式
    _path.addArc(new Rect.fromLTWH(50, 50, 50, 50), 135.0 * (pi / 180.0), 225.0 * (pi / 180.0));
    _path.addArc(new Rect.fromLTWH(100, 50, 50, 50), 180.0 * (pi / 180.0), 225.0 * (pi / 180.0));
    _path.lineTo(100, 140);
    _path.lineTo(58, 93);
    canvas.drawPath(_path, _paint);
  }复制代码



Path 主要有方法以下：

直接描述路径的方法还能够细分为两组：添加子图形和画线（直线或曲线）

  • addXXX() - 添加子图形（因为此类方法参数与上面介绍的画简单图形同样，就很少赘述了）
  1. addArc(Rect oval, double startAngle, double sweepAngle) - 添加圆弧
  2. addOval(Rect oval) - 添加圆
  3. addPolygon(List<Offset> points, bool close) - 添加一个由点的集合描述的多边形
  4. addRect(Rect rect) - 添加矩形
  5. addRRect(Rect rect) - 添加圆角矩形
  6. addPath(Path path, Offset offset) - 添加子路径
  • XXXTo() - 画线（直线或曲线）

向目标位置画直线 - lineTo(double x, double y) / relativelineTo(double x, double y) 

从当前位置向目标位置画一条直线， x 和 y 是目标位置的坐标。这两个方法的区 别是， lineTo(x, y) 的参数是绝对坐标，而 relativeLineTo(x, y) 的参数是相对当前位置的相对坐标 ；

_paint.style = PaintingStyle.stroke; // 画线模式
_path.lineTo(100, 100); // 由当前位置 (0, 0) 向 (100, 100) 画一条直线
_path.relativeLineTo(100, 0); // 由当前位置 (100, 100) 向正右方画100像素的位置
canvas.drawPath(_path, _paint);复制代码



画二阶贝塞尔曲线 - quadraticBezierTo(double x1, double y1, double x2, double y2) /  relativeQuadraticBezierTo(double x1, double y1, double x2, double y2) 

x1，y1是控制点的坐标；x2，y2是结束点的坐标；relativeQuadraticBezierTo()同上面相对直线方法

_paint.style = PaintingStyle.stroke; // 画线模式
List<Offset> points = new List();
points.add(new Offset(100, 50)); // 画出控制点位置，方便理解
canvas.drawPoints(PointMode.points, points, _paint);
_path.moveTo(0, 100); // 移动起点到（0,100）
_path.quadraticBezierTo(100, 50, 200, 100);
canvas.drawPath(_path, _paint);复制代码



画三阶贝塞尔曲线 - cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) / relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3) 

和上面这个 quadraticBezierTo()和relativeQuadraticBezierTo() 的二阶贝塞尔曲线同理，就很少说了。


移动到某点 - moveTo(double x, double y) / relativeMoveTo(double dx, double dy) 

不管是直线仍是贝塞尔曲线，都是以当前位置做为起点，而不能指定起点。但能够经过 moveTo(x, y) 或 relativeMoveTo(x, y) 来改变当前位置，从而间接地设置这些方法的起点。

_paint.style = PaintingStyle.stroke; // 画线模式
_path.moveTo(20, 40); // 移动起点到（20,40）
_path.lineTo(80, 100); // 画条斜线
_path.moveTo(100, 40); // 移动起点到（100,20）
_path.lineTo(100, 100); // 画条直线
canvas.drawPath(_path, _paint);复制代码


但凡事都有例外 arcTo() 这个方法并不从当前位置开始绘制

画弧线 - arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) 

前三个参数，咱们已经很熟悉了，最后一个参数的意思是，画这个弧的时候是拖着笔到起点仍是抬下笔到起点

_paint.style = PaintingStyle.stroke; // 画线模式
_path.moveTo(20, 40); // 移动起点到（20,40）
_path.lineTo(80, 100); // 画条斜线
_path.arcTo(new Rect.fromLTWH(60, 60, 100, 100), 0.0 * (pi / 180.0), 90.0 * (pi / 180.0), false);
canvas.drawPath(_path, _paint);复制代码

拖着笔：


抬下笔：



封闭当前路径 - close() 

_paint.style = PaintingStyle.stroke; // 画线模式
_path.moveTo(20, 40); // 移动起点到（20,20）
_path.lineTo(80, 100); // 画条斜线
_path.arcTo(new Rect.fromLTWH(60, 60, 100, 100), 0.0 * (pi / 180.0), 90.0 * (pi / 180.0), false);
_path.close(); // 封闭当前路径
canvas.drawPath(_path, _paint);复制代码


到这里Canvas图形的绘制就讲的差很少了，图形简单时，使用 drawCircle() drawRect() 等方法来直接绘制；图形复杂时，使用 drawPath() 来绘制自定义图形。 除此以外， Canvas 还能够绘制图片和文字。

画图片 - drawImage(Image image, Offset p, Paint paint) / drawImageRect(Image image, Rect src, Rect dst, Paint paint) 

drawImage() 从指定点开始将图片宽高按像素绘制，因为没法控制图片的大小，并不经常使用；

第一个参数是ui包下的Image,并非 Image Widget；

Image 能够经过如下代码获取

ui.Image image;

/**
 * 初始化图片
 *
  Future<VoidCallback> initImage() async {
    image = await _loadImage("./assets/images/img.jpg");
    return null;
  }

  /**
   * 经过assets路径，获取资源图片
   */
  Future<Image> _loadImage(String assets) async {
    final ByteData data = await rootBundle.load(assets);
    if (data == null) throw 'Unable to read data';
    Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    FrameInfo frame = await codec.getNextFrame();
    return frame.image;
  }复制代码

而后在initState() 方法中初始化（  shouldRepaint() 方法必定要记得返回 true  ，不然没法重绘）

void initState() {
  super.initState();
  painter.initImage().then((val) {
    setState(() {
    });
  });
}复制代码

最后在 paint() 方法中填入如下代码：

canvas.drawImage(image, new Offset(0, 0), _paint);复制代码


drawImageRect() 这个方法常用；主要了解第二个参数与第三个参数：

  • Rect src - 原图的区域，通常传图片的宽高
  • Rect dst - 显示的区域， 指图片显示的区域，若是原图区域宽高比与显示区域不一致，原图会被拉伸或压缩


canvas.drawImageRect(image, Offset(0.0, 0.0) & Size(image.width.toDouble(), image.height.toDouble()), Offset(0.0, 0.0) & Size(200, 200), _paint);复制代码

正常比例：


拉伸：


画文字 - drawParagraph(Paragraph paragraph, Offset offset)

代码注释的很清楚，这里循环画了5段文字

for (int i = 0; i<5 ;i++){
  // 新建一个段落建造器，而后将文字基本信息填入;
  ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
    textAlign: TextAlign.left,
    fontWeight: FontWeight.w300,
    fontStyle: FontStyle.normal,
    fontSize: 15.0+i,
  ));
  pb.pushStyle(ui.TextStyle(color: Colors.black87));
  pb.addText('Flutter一统移动端');
  // 设置文本的宽度约束
  ParagraphConstraints pc = ParagraphConstraints(width: 300);
  // 这里须要先layout,将宽度约束填入，不然没法绘制
  Paragraph paragraph = pb.build()..layout(pc);
  // 文字左上角起始点
  Offset offset = Offset(50, 50+i*40.0);
  canvas.drawParagraph(paragraph, offset);
}复制代码


Canvas及paint的使用基础部分大概就是这样了，下期文章见

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程