Flutter 绘制Paint

Flutter 的绘制主要涉及两个Widget: CustomPainter, CustomPaint

CustomPainter:提供画布的组件; 有几个主要的参数:

a. painter : 绘制的对象,是一个CustomPaint。它的绘制是在children之前。如果设置了children,该painter绘制的内容会被覆盖。
b. foregroundPainter: 绘制的对象,是一个CustomPaint。它的绘制是在children之后。该painter绘制的内容会覆盖children 。
c. size: 绘制区域的大小,如果有child就忽略此属性直接用child的size。
d. child :

CustomPaint:是一个抽象类,要实现绘制的逻辑必须继承该抽象类,并实现它的paint和shouldRepaint方法。

void paint(Canvas canvas, Size size);: 里边实现具体的绘制逻辑。

-- canvas: 画布
-- size: 画布的大小

bool shouldRepaint(covariant CustomPainter oldDelegate); : 控制是否重绘

绘制

Paint 画笔

介绍几个常用的参数:
(1) color: 画笔的颜色
(2)strokeWidth: 线的宽度
(3)style: 填充模式,有两种: PaintingStyle.fill : 填充; PaintingStyle.stroke: 空心
(4)strokeCap:
(5)blendMode: 重叠部分的处理,一般在截取Image后合并Image用。
a. src: 只显示源图
b. dst: 只显示目标图
c. srcOver: 都显示,重叠部分是src覆盖在dst的上边;
d. dstOver: 都显示,重叠部分是dst覆盖在src的上边;
e. srcIn; // 只显示重叠部分的src图,透明部分也是不显示的。
f. dstIn; // 只显示重叠部分的dst图,透明部分也是不显示的。
... 还有好多不说了,用的时候自己看注释。

p = Paint()
  ..color = Colors.orange // 画笔的颜色
  ..strokeWidth = 2.0 // 线的宽度
  ..style = PaintingStyle.stroke // fill: 填充, stroke: 空心
  ..strokeCap = StrokeCap.butt // 转折处的处理
  ..blendMode = BlendMode.dstIn; // 重叠处的处理模式,clear,src, dst, srcIn,dstIn等等。

绘制线段

// 第一个参数表示起点坐标
// 第二个参数表示终点坐标
// 第三个参数是画笔
canvas.drawLine(Offset(10, 10), Offset(100, 100), p);

绘制矩形

绘制矩形需要用到Rect, 而React的创建可以通过Offset和Size来完成,Offset 决定他左上角的坐标 Size 决定他的大小。Rect rect = offset & size;

// 矩形的长宽
Size size = Size(200, 300);
// 矩形左上角的坐标
Offset offset = Offset(200, 200);
// 合成Rect,为什么可以这样合成? 官方给的!看下边---> 
Rect rect = offset & size;
canvas.drawRect(
    rect,
    Paint()
      ..color = Colors.red
      ..strokeWidth = 3.0);
/// A Rect can be created with one its constructors or from an [Offset] and a
/// [Size] using the `&` operator:
///
/// ```dart
/// Rect myRect = const Offset(1.0, 2.0) & const Size(3.0, 4.0);
/// ```

绘制多边形

绘制多变形要用到Path的moveTo和lineTo放发,
void moveTo(double x, double y): 将画笔的起点移动到(x,y)坐标。
void lineTo(double x, double y): 从当前点绘制一条直线到(x,y)坐标。

canvas.drawPath(
    Path()
      ..moveTo(30, 200)
      ..lineTo(200, 200)
      ..lineTo(100, 300)
      ..lineTo(50, 330)
      ..lineTo(30, 300)
      ..close(),
    Paint()
      ..color = Colors.lightBlue
      ..strokeWidth = 1.0);

绘制圆

// 第一个参数是原点坐标
// 第二个参数是半径
// 第三个参数是画笔
canvas.drawCircle(Offset(100, 100), 50, p);

绘制阴影

// Path 的用法在上边绘制多变形的时候已经说过了 moveTo, lineTo .
canvas.drawShadow(
    Path()
      ..moveTo(30.0, 30.0)
      ..lineTo(320.0, 30.0)
      ..lineTo(120.0, 160.0)
      ..lineTo(30.0, 160.0)
      ..close(),
// 阴影的颜色
    Colors.blue, 
// 阴影扩散的范围
    3,
    false);

绘制文本

ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
  textAlign: TextAlign.left, // 对齐方式
  fontWeight: FontWeight.w600, // 粗体
  fontStyle: FontStyle.normal, // 正常 or 斜体
  fontSize: 18,
))
  ..pushStyle(dartUi.TextStyle(color: Colors.black26))
  ..addText('''
  // 测试文本的绘制
  // 绘制阴影
  canvas.drawShadow(
    Path()
      ..moveTo(30.0, 30.0)
      ..lineTo(320.0, 30.0)
      ..lineTo(120.0, 160.0)
      ..lineTo(30.0, 160.0)
      ..close(),
    Colors.blue,
    3,
    false);
      ''');
// 绘制的宽度
ParagraphConstraints pc =
    ParagraphConstraints(width: 350.0);  
Paragraph paragraph = pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(30, 300));

绘制Image

绘制的代码如下,当然他有好几种绘制方式(drawImage, drawImageRect, drawImageNine)。代码看起来很简单,但是如果你直接这样写的话,是会报错的。折腾了我很久,最后找出的原因是 图片的加载是耗时的,不要放在这里边加载,放到外边加载完成后通过参数传进 CustomPainter 就不会报错了。 不信你直接在这里加载image然后在Future的then里去调用下面的代码,也是不行的!!!
一般用 canvas.drawImageRect 来绘制而不用canvas.drawImage。 canvas.drawImageRect可以指定宽高,可以截图。看一下源码你会发现drawImage 的内部也是调用drawImageRect 来实现的。
使用如下:

canvas.drawImage(
    image, dartUi.Offset(0, image.height.toDouble() + 30), Paint());
canvas.drawImageRect(
    image,
    // 本次要截取的区域--相对于原图(该坐标以原图的左上角为原点0,0, 截图一个宽高都为60的区域)
    Rect.fromLTWH(0, 0, 60, 60), 
      // 要被截取的原图所在的区域
    Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
    Paint());

通过绘制实现图片的截图功能

// 裁剪画布,区域为(60, 60, 190, 90)
canvas.clipRect(Rect.fromLTWH(60, 60, 190, 90));

类似Android, 可以通过裁剪画布的功能做一些特殊的绘制。 一般裁剪之前会调用canvas.store ()来保存当前的画布,等到在裁剪过的画布上做完相关的操作之后可以通过 canvas.restore()来恢复之前的画布。
canvas.store(): 保存当前的画布
canvas.restore ():恢复裁剪之前的画布(之前保存的)
这俩要成对出现。
可以跑的代码:

import 'package:flutter/material.dart';


void main() =>
    runApp(
        StartPage()
    );

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}


class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("flutter 绘制demo"),),
      body: CustomPaint(foregroundPainter: PaintDemo(),),
    );
  }
}

class PaintDemo extends CustomPainter {
  Paint _paint;

  PaintDemo() {
    _paint = Paint()
      ..color = Colors.orange // 画笔的颜色
      ..strokeWidth = 2.0 // 线的宽度
      ..style = PaintingStyle.fill // fill: 填充, stroke: 空心
    ;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset(10, 10), Offset(60, 10), _paint);

    canvas.drawCircle(Offset(100, 100), 50, _paint);

    Size size = Size(200, 300);
    // 可以通过Offset和Size来创建一个Rect,Offset 决定他右上角的坐标    Size 决定他的大小
    Rect rect = Offset(200, 200) & size;
    canvas.drawRect(
        rect,
        Paint()
          ..color = Colors.red
          ..strokeWidth = 3.0);

    // 绘制阴影
    canvas.drawShadow(
        Path()
          ..moveTo(30.0, 500.0)
          ..lineTo(320.0, 500.0)..lineTo(120.0, 660.0)..lineTo(30.0, 660.0)
          ..close(),
        Colors.blue,
        3,
        false);
  }

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

到此, 关于Flutter的绘制就介绍的差不多了,欢迎指正。
关于图片的绘制,代码稍微多一些,没放上去,有需要留言。

你可能感兴趣的:(Flutter 绘制Paint)