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绘制图形内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://mp.weixin.qq.com/s/x8gwkeSCiT_BwZyAOYCALA
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- PS排除重叠形状是什么意思?很多朋友都不是很清楚,其实方法很简单的,下面小编就为大家介绍介绍一下,不会的朋友可以参考本文,来看看吧。 步骤:1、在PS中,选择“矩形工具...2016-12-31
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
- 下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20
用Intel HAXM给Android模拟器Emulator加速
Android 模拟器 Emulator 速度真心不给力,, 现在我们来介绍使用 Intel HAXM 技术为 Android 模拟器加速,使模拟器运行度与真机比肩。 周末试玩了一下在Eclipse中使...2016-09-20- 在安卓开发时我碰到一个问题就是需要实现全屏,但又需要我们来判断出用户是使用了全屏或非全屏了,下面我分别找了两段代码,大家可参考。 先来看一个android屏幕全屏实...2016-09-20
Android开发中布局中的onClick简单完成多控件时的监听的利与弊
本文章来为各位介绍一篇关于Android开发中布局中的onClick简单完成多控件时的监听的利与弊的例子,希望这个例子能够帮助到各位朋友. 首先在一个控件加上这么一句:and...2016-09-20Ubuntu 系统下安装Android开发环境 Android Studio 1.0 步骤
Android Studio 是一个Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试,可以在Linux,Mac OS X,Window...2016-09-20