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

1字数 654阅读 1123

目录传送门:《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