Android Flutter利用CustomPaint绘制基本图形详解

目录
  • 绘制矩形
  • 绘制圆形
  • 绘制椭圆
  • 绘制任意形状
  • 绘制弧形
  • 总结

上一篇我们介绍了 CustomPaint 的基本概念和使用，可以看到 CustomPaint 其实和 前端的 Canvas基本上是一样的，实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持，毕竟 CustomPaint 其实也是基于 Canvas 实现的。本篇我们来介绍 CustomPaint 基本图形的绘制。

绘制矩形

绘制矩形比较简单，方法定义如下：

void drawRect(Rect rect, Paint paint)

其中 rect 为要绘制矩形，paint 即画笔配置对象。比如我们要水平居中绘制一个宽度200 x 120的矩形，可以使用如下代码：

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
var center = size / 2;
// 绘制矩形
var paint = Paint()..color = Color(0xFF2080E5);
paint.strokeWidth = 2.0;
canvas.drawRect(
  Rect.fromLTWH(center.width - 100, 60, 200, 120),
  paint,
);

paint 默认是实心填充的，如果要空闲填充，设置paint 对象的style 属性 为 PaintingStyle.stroke 即可。

绘制圆形

绘制圆形上一篇有介绍过，和绘制矩形类似，只是传入的参数是圆心位置，半径和 paint 对象。

canvas.drawCircle(
  Offset(center.width - 80, 240),
  40,
  paint,
);

绘制椭圆

椭圆的尺寸是通过外接的矩形约束的，调用形式和绘制矩形相同。

canvas.drawOval(
  Rect.fromLTWH(center.width, 200, 120, 80),
  paint,
);

绘制任意形状

绘制任意形状通过 drawPath 实现，将所需要绘制的形状路径 使用 Path 对象构建即可。以画一个等边三角形为例，我们确定三个顶点的位置后，使用 Path 对象的 lineTo 方法将三个顶点连接起来即可。下面是实现代码。

// 使用 Path绘制三角形
Path trianglePath = Path();
// 空心绘制
paint.style = PaintingStyle.stroke;
trianglePath.moveTo(center.width - 30, 300);
trianglePath.lineTo(center.width + 30, 300);
trianglePath.lineTo(center.width, 352);
trianglePath.lineTo(center.width - 30, 300);
canvas.drawPath(trianglePath, paint);

绘制弧形

绘制弧形实际也是通过绘制椭圆实现的，只是通过控制绘制的角度来控制弧形绘制的范围。绘制弧形的方法定义如下：

void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

其中 rect 就是椭圆尺寸的约束矩形，startAngle 是起始角度，sweepAngle 是绘制的角度范围。useCenter 表示是否到矩形中心点闭合，默认为 true。即按顺时针方向。默认是从中心点到对应起始角度的点连直线绘制完指定角度范围后再通过连接直线回到中心点。如果 useCenter 为 false，那么就直接按弧线的起止点闭合，而不会回到中心点。下面是两种绘制的区别，左边是 useCenter 为 false，右边是 useCenter 为 true，其他参数都相同。

下面的代码是绘制弧形的示例代码：

canvas.drawArc(
  Rect.fromLTWH(center.width - 60, 340, 120, 80),
  0,
  pi / 2,
  false,
  paint,
);

总结

本篇介绍了 CustomPaint 绘制基本图形的方法和示例，实际上 Flutter 的 Canvas 提供了很多其他绘制图形的方法，如绘制线条，绘制圆角矩形，绘制文本等等，有兴趣的可以参考官网的说明文档查看各个方法的使用。有了绘制基本图形的基础，我们就可以绘制一些有趣的图形了 —— UI 小姐姐交代的任务还没完成呢！

到此这篇关于Android Flutter利用CustomPaint绘制基本图形详解的文章就介绍到这了,更多相关Flutter CustomPaint绘制图形内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)

    Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)

    一.前言 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的.实现圆角图片的方法其实不少,常见的就是利用Xfermode,Shader.本文直接继承ImageView,使用BitmapShader方法来实现圆形.圆角和椭圆的绘制,等大家看我本文的方法后,其他的类似形状也就都能举一反三来来画出来了. 二.效果图: 三.BitmapShader简介 BitmapShader是Shader的子类,可以通过Paint.setShader(Shader

  • Android中常见的图形绘制方式总结

    目录 图形绘制概述 View + Canvas SurfaceView + Canvas TextureView + Canvas SurfaceView + OpenGL ES GLSurfaceView + OpenGL ES TextureView + OpenGL ES 总结 图形绘制概述 Android平台提供丰富的官方控件给开发者实现界面UI开发,但在实际业务中经常会遇到各种各样的定制化需求,这必须由开发者通过自绘控件的方式来实现.通常Android提供了Canvas和OpenGL

  • Android自定义View实现shape图形绘制

    Android自定义View实现shape图形绘制

    概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

  • Android自定义控件绘制基本图形基础入门

    本文讲述绘制Android自定义各种图形效果,为自定义控件的入门篇 相关视频链接: Android自定义控件系列 http://edu.csdn.net/course/detail/3719/65396 Android视频全系列 http://edu.csdn.net/course/detail/2741/43163 绘制点–这个控件只需要在布局中引用或者代码中new 即可,下面几个绘制只展示onDraw方法 package com.example.viewdemo1.view; import

  • android绘制几何图形的实例代码

    android绘制几何图形的实例代码

    本文实例为大家分享了android绘制几何图形展示的具体代码,供大家参考,具体内容如下 效果图: 代码(仅绘制类,不可直接运行): public class MyView extends View { public MyView(Context context, AttributeSet set) { super(context, set); } @Override // 重写该方法,进行绘图 protected void onDraw(Canvas canvas) { super.onDraw

  • Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

  • Android Flutter利用CustomPaint绘制基本图形详解

    Android Flutter利用CustomPaint绘制基本图形详解

    目录 绘制矩形 绘制圆形 绘制椭圆 绘制任意形状 绘制弧形 总结 上一篇我们介绍了 CustomPaint 的基本概念和使用,可以看到 CustomPaint 其实和 前端的 Canvas基本上是一样的,实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持,毕竟 CustomPaint 其实也是基于 Canvas 实现的.本篇我们来介绍 CustomPaint 基本图形的绘制. 绘制矩形 绘制矩形比较简单,方法定义如下: void drawRect(Rect rect, Pa

  • Android Flutter表格组件Table的使用详解

    Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

  • Android Flutter实现3D动画效果示例详解

    Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • Python利用随机函数生成变化图形详解

    Python利用随机函数生成变化图形详解

    鉴于上一篇中最后三个问题: 1.上述程序是否能进行优化(比如功能相同的) 2.创建三个3个实例,用了3个语句,能否建一个函数,只输入一个数n,就自动创建n个实例?同时,每个实例的num_times随机,(n比较大时,num_times应该比较小) 3.当实现上述功能后,程序运行,只输入一个参数(创建实例的个数),就会自动生成对应的num_times,并分别调用相关函数生成对应图表. 可以,在类Rand_moving()中计算每一步的方向和移动位置时,都用到了一个乘法公式, x_direction

  • Python利用随机函数生成变化图形详解(一)

    Python利用随机函数生成变化图形详解(一)

    目录 前言 一.rand_moving.py文件定义功能如下 二.绘图模块 小结 前言 综合前述的类.函数.matplotlib等,完成一个随机移动的过程(注意要确定移动的次数,比如10万次),每次行走都完全是随机的,没有明确的方向,结果是由一系列随机决策确定的,最后显示出每次移动的位置的图表. 思考: 1)每次走动多少个像素,由随机函数决定,每次移动方向也随机确定.由随机方向和随机像素共同移动位置大小和方向. 2)保证将每次移动的位置保存在列表中,供后面matplotlib调用,生成图表. 故

  • Android Flutter实现精灵图的使用详解

    Android Flutter实现精灵图的使用详解

    目录 前言 如何使用精灵图 自定义实现加载 Flame加载精灵图 前言 在日常开发中遇到的图片展示一般是静态图和Gif图两种形式(静态和动态的不同).与此同时当需要对图片做效果时让其动起来,常用方案是Gif图播放或者是帧动画(多种静态图轮询播放).但在游戏开发中还有一种动图表现形式叫做Sprite图(雪碧图),其在前端开发中也是很常见.为什么需要使用精灵图,因为每张图片显示都需要去发起请求获取,若页面图片数量较多(一个页面有几十个小图)并发请求将是一个大数量级,可能会造成页面加载速度降低,精灵图

  • Flutter利用Canvas绘制精美表盘效果详解

    Flutter利用Canvas绘制精美表盘效果详解

    目录 前言 初始化 面板 刻度 刻度线 刻度值 指针 时针 分针 秒针 动起来 前言 趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘. 最终实现的效果还不错,如下: 前面说到使用 Canvas 实现该表盘效果,而在 Flutter 中使用 Canvas 更多的则是继承 CustomPainter 类实现 paint 方法,然后在 CustomPaint 中使用自定义实现的 CustomPainter. 比如这里创建的 DialPainter 使用如下: @overrid

  • Android Flutter绘制扇形图详解

    Android Flutter绘制扇形图详解

    目录 简介 CustomPaint介绍 CustomPainter介绍 paint介绍 shouldRepaint介绍 示例 使用CustomPaint 自定义Painter 绘制 触摸事件处理 动画实现 简介 在开发过程中通常会遇到一些不规则的UI,比如不规则的线条,多边形,统计图表等等,用那些通用组件通过组合的方式无法进行实现,这就需要我们自己进行绘制.可以通过使用CuntomPaint组件并结合画笔CustomPainter去进行手动绘制各种图形. CustomPaint介绍 Custom

  • Flutter CustomPaint自定义绘画示例详解

    目录 正文 CustomPaint 介绍 绘制点 PointMode3种模式 绘制线 和路径 绘制五子棋 总结 正文 CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制.在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 Cu

随机推荐