自定义View项目实战（一）：Canvas与Paint基础

最新推荐文章于 2024-09-04 00:06:44 发布

斯音

最新推荐文章于 2024-09-04 00:06:44 发布

阅读量165

点赞数

分类专栏： android 文章标签： canvas paint

本文链接：https://blog.csdn.net/bugmiao/article/details/111310178

版权

本文深入探讨自定义控件，通过Canvas和Paint实现各种图形绘制，包括矩形、圆角矩形、圆、椭圆、线、颜色填充、点、路径、弧形和阴影。讲解了各种绘制方法及其参数，如Rect构造函数和Paint风格设置。

摘要由CSDN通过智能技术生成

本文重点

着重介绍自绘控件，因为所有的widget归根结底都是使用canvas和paint来绘制的，理解了二者，对于其他的widget原理有溯源的功效。

Canvas：画布
Paint：画笔
怎么做？
继承CustomPainter
重写paint方法与shouldRepaint方法
paint提供来canvas和size，canvas用于绘制，size用于确定大小
shouldRepaint用于确认是否每次都重新绘制

画矩形canvas.drawRect();

void drawRect(Rect rect, Paint paint)

rect 矩形的描述

Rect.fromCenter({ Offset center, double width, double height })，根据中心点和宽高，定义一个矩形。
Rect.fromCircle({ Offset center, double radius })，根据中心点和半径定义一个矩形
Rect.fromLTRB(this.left, this.top, this.right, this.bottom)，left左边框距离左边的距离，top上边框距离上边的距离，right右边框距离左边的距离，bottom下边框距离上边的距离。根据这四个值定义一个矩形。
Rect.fromLTWH(double left, double top, double width, double height)，根据左上角顶点和宽高定义一个矩形。
Rect.fromPoints(Offset a, Offset b)，根据左上角顶点和右下角顶点定义一个矩形。
示例：

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  void change(bool value) {
    setState(() {
      flag = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(380, 560),
          painter: MyPainter(),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter{

  @override
  void paint(Canvas canvas, Size size) {
    test01(canvas, size);
  }

  void test00(Canvas canvas, Size size) {
    var paint = new Paint()
        ..color = Colors.orange[200]
        ..style = PaintingStyle.fill
        ..isAntiAlias = true;
    // 画矩形
    canvas.drawRect(Offset.zero & size, paint);
    paint
    ..color = Colors.green;
    canvas.drawRect(Rect.fromCenter(width: 200,height: 200,center: Offset(150, 150)), paint);

    paint
      ..color = Colors.blue;
    canvas.drawRect(Rect.fromCircle(radius: 50,center: Offset(150, 150)), paint);

    paint