本文涉及的知识点:截图、图片保存、根据用户手势实时绘制canvas。
GitHub地址:github.com/yumi0629/Fl…
先上效果图:
需求分析
这次的想法是移植自项目中的一个小功能:截屏当前页面,添加涂鸦功能后,分享给第三方APP。分享功能我们暂不讨论,使用插件可以轻松完成,重点是截屏+涂鸦+图片保存。
具体实现思路是:截取当前屏幕内容,保存至APP缓存目录,涂鸦页面再去读取文件,依然是使用CustomerPaint实现根据用户手势实时绘制,最后将用户涂鸦部分与原图片组合保存至本地。给图片加水印的实现其实就是截屏,因为截取当前屏幕内容实际上也是将Widget转化为byteData再转化为File的过程。
截屏并保存
Flutter提供了一个RepaintBoundary
Widget来实现截图的功能,用RepaintBoundary
包裹需要截取的部分,RenderRepaintBoundary
可以将RepaintBoundary
包裹的部分截取出来;然后通过boundary.toImage()
方法转化为ui.Image
对象,再使用image.toByteData()
将image转化为byteData
;最后通过File().writeAsBytes()
存储为文件对象:
RepaintBoundary(
key: _repaintKey,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Image.asset(
'images/food01.jpeg',
fit: BoxFit.cover,
),
Icon(Icons.translate,),
],
),
)
RenderRepaintBoundary boundary =
_repaintKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File(tempPath).writeAsBytes(pngBytes);
需要注意的地方:
- 记住给
RepaintBoundary
添加一个key
,因为我们需要通过这个key
来找到当前的RenderObject
,生成一个RenderRepaintBoundary
对象; image.toByteData(format: format)
可以自定义存储格式,一般图片为png
格式,但是要注意,如果你的RepaintBoundary
包裹的部分没有设置背景色,那么存储出来的图片可能会有背景色缺失的问题,boundary.toImage()
并不会自动添加一个你想要的白色背景,这种情况在截取Text
的时候会尤其明显。toImage({double pixelRatio = 1.0})
中的pixelRatio
参数是可以表面上提高图片清晰度的。为什么说是表面上呢?因为这个参数是纯px为单位的,和你的屏幕密度并没有关系。以安卓为例,屏幕基础宽高为360px*480px, 默认输出也是360px*480px的图片文件;如果你将pixelRatio
设置为10,那么你输出的图片文件大小将是3600px*4800px,但是展示这张图的手机屏幕大小并不会改变,图变大了,自然看起来“清晰”了。因此,这个值我建议取window.devicePixelRatio
。
Flutter中获取存储路径
我们可以通过官方插件path_provider
来获取APP的内部和外部存储路径:
Directory tempDir = await getTemporaryDirectory()
,等同于iOS中的NSCachesDirectory
API和Android中的getCacheDir
API;Directory externalDir = await getExternalStorageDirectory()
,不支持iOS(会抛出UnsupportedError),等同于Android中的getExternalStorageDirectory
API;Directory applicationDir = await getApplicationDocumentsDirectory()
,等同于iOS中的NSDocumentsDirectory
API和Android中的AppData
目录;
要注意的是getExternalStorageDirectory()
方法,大多数情况下是访问SDCard路径,因此即使在Android中调用,也要注意权限问题,推荐使用permission_handler
插件。 还有就是存储文件的时候要养成一个好习惯,先判断下父目录是否存在:
void _saveImage(Uint8List uint8List, Directory dir, String fileName) async {
bool isDirExist = await Directory(dir.path).exists();
if (!isDirExist) Directory(dir.path).create();
······
File(tempPath).writeAsBytes(uint8List);
}
涂鸦
通过GestureDetector
包裹需要绘制的区域,收集用户的手势路径信息,通过canvas.drawLine()
方法来绘制路径:
List<Offset> points = [];
GestureDetector(
onPanStart: (details) {
},
onPanUpdate: (details) {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
state(() {
points.add(localPosition);
});
},
onPanEnd: (details) {
},
)
for (int i = 0; i < points.length - 1; i++) {
if (points[i] != null && points[i + 1] != null)
canvas.drawLine(points[i], points[i + 1], _linePaint);
}
为什么不直接用canvas.drawPoints()
方法呢?
即使将PointMode
设置为PointMode.lines
,你会发现,绘制出来的点集合并不是无缝连接在一起的,看起来就像是虚线一样:
PointMode.polygon
,polygon确实可以绘制连续的曲线,但是有两个缺点:一是绘制不如drawLine流畅,延迟会大一点,因为暂时的实现方式是用户手指每动一次都会重绘一次,消耗比较大;二是绘制出来的线条不如直接绘制line来得圆润。我之前没有深度考虑drawPoints的一个原因就是延迟太大。以后如果能找到更好的刷新机制,我会尝试使用drawPoints来绘制的。因此我们还是使用
drawLine()
强行将所有点连接起来。用户绘制完成后,依然是使用
RepaintBoundary
来保存图片就可以啦~~~