专栏首页flutter开发者自定义View【2】

自定义View【2】

上期回顾


在前面的文章中我们学习了部分绘制的相关方法,在本篇文章中我们会继续再介绍一些常用的绘制方法。

绘制路径drawPath


drawPath(Path path, Paint paint)

绘制路径非常的简单,首先需要一个要绘制的路径path,然后就是这个paint了。

Path的用法也非常的简单,下面列出一下常用的方法:方法名

方法

说明

moveTo

将路径起始点移动到指定的位置

relativeMoveTo

相对于当前位置移动到

lineTo

从当前位置连接指定点

relativeLineTo

相对当前位置连接到

arcTo

二阶贝塞尔曲线

conicTo

三阶贝塞尔曲线

add**

添加其他图形,如addArc,在路径是添加圆弧

contains

路径上是否包括某点

transfor

给路径做matrix4变换

combine

结合两个路径

close

关闭路径,连接路径的起始点

reset

重置路径,恢复到默认状态

那么我们还是举个例子吧:

当然,我们也可以绘制多个过程path

当然我们也可以尝试画画其他的图形

使用arcTo绘制曲线,不熟悉贝塞尔曲线的童鞋可以自行google你科普下。

使用二阶贝塞尔曲线绘制弧线

或者直接绘制一个圆

当然我们也可以使用三阶贝塞尔曲线来绘制其他的图形:

比如,我对你们的爱哦

绘制图片drawImage

drawImage(Image image, Offset p, Paint paint)

绘制起来也非常的简单,首先我们需要获取本地图片文件,然后绘制图片即可。

看个例子:

当然,绘制picture与绘制image类似,大家可以自己在线尝试。

绘制颜色drawColor


绘制颜色用起来就比较简单了,主要是用来给你绘制过的图形上做颜色的变换,颜色的变换模式有多种,大家可以在下面自己尝试,下面仅仅演示下如何使用

首先我们先绘制一个颜色为蓝色的圆

然后我们打开代码的注释,绘制红色

或者我们修改绘制的模式为

BlendMode.colorDodge

小伙伴们可以自己在下面尝试不同的颜色模式来看看效果。

小结


  • 使用drawPath绘制路径
  • 使用而塞尔曲线绘制想要的曲线效果
  • 使用drawImage来绘制图片
  • 使用drawColor来绘制颜色迭代效果

本文分享自微信公众号 - flutter开发者(Flutter_Developers)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自定义View【1】

    在上一篇文章中,我们学习了自定义View的基本流程和一些相关知识,想必大家对自定义View多少都有了一定的了解。

    flyou
  • 自定义View番外篇

    在前面的文章中我们学习了自定义View的基本用户,并且结合动画等相关知识给大家举了几个例子。

    flyou
  • 自定义View概述

    在前面的文章中我们学习了ExpansionPanelList的用法,使用ExpansionPanelList可以很轻松的实现可展开列表的效果,在文章的最后依然给...

    flyou
  • WPF 自己封装 Skia 差量绘制控件

    使用 Skia 能做到在多个不同的平台使用相同的一套 API 绘制出相同界面效果的图片,可以将图片绘制到应用程序的渲染显示里面。在 WPF 中最稳的方法就是通过...

    林德熙
  • 用程序绘制一个脸表情

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • 从数字滚动动画看自定义View的绘制思路

    用户1907613
  • 浅谈AndroidGPU过度绘制、GPU呈现模式分析及相关优化

    在真机设备下有一个开发者选项,这个大家都知道,我们最常用的就打开'USB调试'功能,方便真机调试。

    听着music睡
  • 手把手教你学会风险因子关联图绘制

    看到这张图是不是眼前一亮的感觉,觉得你的预后类型文章就差这一张图了呢?那么恭喜你,看完这个帖子就能将它收入囊中了。

    百味科研芝士
  • 经典Bug永流传---每周一“虫”(十三)

    调试GPU过度绘制这个工具主要是用来检查布局中是否存在布局层次过深的问题,过度绘制就是在绘制界面时,对同一个像素重复绘制了多次,但是用户能够看到的也只有最顶层绘...

    厦门-安仔
  • 一款同时测功能和过度绘制的工具

    1.在脚本中增加关键字overdraw,并输入判断过度绘制的值,具体根据你的app或者你的测试经验进行设置值。我这边选择输入overdraw:30.如图:

    厦门-安仔

扫码关注云+社区

领取腾讯云代金券