前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义View【2】

自定义View【2】

作者头像
flyou
发布2018-11-20 18:19:49
4300
发布2018-11-20 18:19:49
举报
文章被收录于专栏:flutter开发者flutter开发者

上期回顾


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

绘制路径drawPath


drawPath(Path path, Paint paint)

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

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

方法

说明

moveTo

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

relativeMoveTo

相对于当前位置移动到

lineTo

从当前位置连接指定点

relativeLineTo

相对当前位置连接到

arcTo

二阶贝塞尔曲线

conicTo

三阶贝塞尔曲线

add**

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

contains

路径上是否包括某点

transfor

给路径做matrix4变换

combine

结合两个路径

close

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

reset

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

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

代码语言:javascript
复制

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

代码语言:javascript
复制

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

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

代码语言:javascript
复制

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

或者直接绘制一个圆

代码语言:javascript
复制

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

比如,我对你们的爱哦

代码语言:javascript
复制

绘制图片drawImage

drawImage(Image image, Offset p, Paint paint)

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

看个例子:

代码语言:javascript
复制

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

绘制颜色drawColor


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

代码语言:javascript
复制

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

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

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

BlendMode.colorDodge

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

小结


  • 使用drawPath绘制路径
  • 使用而塞尔曲线绘制想要的曲线效果
  • 使用drawImage来绘制图片
  • 使用drawColor来绘制颜色迭代效果
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-10-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 flutter开发者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上期回顾
  • 绘制路径drawPath
  • 绘制图片drawImage
  • 绘制颜色drawColor
  • 小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档