26.Flutter:成为Canvas绘制大师(二)

目录传送门:《Flutter快速上手指南》先导篇

接着上一篇 《Flutter:成为Canvas绘制大师(一)》,本篇继续讲解 Canvas 中的常用绘制操作。

绘制圆形drawCircle()

绘制圆形。

🌰 e.g.:

canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);

🖼 效果:

image

设置空心效果 paint..style=PaintingStyle.stroke

🖼 效果:

image

绘制椭圆形drawOval()

需要提供一个 Rect,绘制的是 Rect 的内接矩形。

🌰 e.g.:

Rect rect = Rect.fromLTRB(size.width / 2 - 100, size.height / 2 - 50,
    size.width / 2 + 100, size.height / 2 + 50);
canvas.drawOval(rect, paint);

🖼 效果:

image

设置空心效果 paint..style=PaintingStyle.stroke

🖼 效果:

image

绘制圆弧drawArc()

绘制圆弧需要提供一个 Rect,圆弧相当于是 Rect 的内接椭圆上的一段。

看下这个函数所需的参数:

参数 类型 说明
rect Rect 圆弧所在椭圆的外接矩形
startAngle double 起始位置的弧度。弧度制
sweepAngle double 设置圆弧扫过多少弧度。弧度制
useCenter bool 表示是否链接到圆弧所在椭圆的中心
paint Paint 画笔

🌰 e.g.:

Rect rect = Rect.fromCircle(
    center: Offset(size.width / 2, size.height / 2), radius: 140);
canvas.drawArc(rect, 0, math.pi / 2, true, paint);

🖼 效果:

image

⚠️ 注意,圆弧的 startAnglesweepAngle 采用弧度制。参考:弧度制
如果你想要获得 π 值,可以通过 dart 的 math 包下的 math.pi 获取。

下图是圆弧的0点示意图:

image

🖼 当 useCenter=true 的效果:

image

绘制阴影drawShadow()

在 Flutter 中,使用该函数你可以很方便的绘制阴影。

看看该函数的参数:

参数 类型 说明
path Path 绘制阴影的路径
color Color 阴影的颜色
elevation double 阴影高度
transparentOccluder bool 是否透明封堵器。通常需要设置为true

🌰 e.g.:

Path path = Path()..addRect(rect.translate(20, 0));
canvas.drawShadow(path, Colors.amberAccent, 20, true);

你看,绘制 Shadow 不需要 Paint。

🖼 效果:

image

什么?看不出来有什么用?

前面加个东西看看。

🖼 效果:

image

看起来矩形漂浮起来了😱。

绘制颜色drawColor()

Flutter 中的 drawColor() 是个比较不容易理解的绘制操作。

为什么呢?看看它的参数:

参数 类型 说明
color Color 颜色
blendMode BlendMode 色值混合模式。与此前绘制的内容的混合。

主要就是因为第二个参数 blendMode

不同的值会有不同的表现。

在进行混合的时候,有一个目标色值 dst(调用drawColor()之前已经绘制的内容)和一个源色值 src(就是第一个参数的色值)。

混合就是,以不同的算法,根据 dstsrc 计算出新的色值。

🌰 e.g.:

canvas.drawColor(Colors.redAccent, BlendMode.src);

🖼 效果:

image

由于在调用 drawColor() 之前没有绘制过内容,所以混合就是和背景进行的。

可以看到,此时模式为 BlendMode.src 时,可以给整个画布上颜色。

🖼 如果此前已经绘制了内容:

image

加上如下代码:

canvas.drawColor(Colors.redAccent, BlendMode.color);

🖼 效果:

image

使用 BlendMode.color 模式就像给此前的绘制的内容加了滤镜 🤔。

BlendMode 模式特别的多,可以参考官方的例子:BlendMode官方图解

目录传送门:《Flutter快速上手指南》先导篇

如何找到我?

传送门:CoorChice 的主页

传送门:CoorChice 的 Github

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342