Step.1 Canvas轉(zhuǎn)換為圖片
首先，你要了解flutter如何將canvas轉(zhuǎn)換成圖片，這里有一個(gè)非常好的例子分享給大家flutter_canvas_to_image，這里簡(jiǎn)單講解一下思路：
1.首先創(chuàng)建一個(gè) ui.PictureRecorder（記錄儀）, 然后作為載體創(chuàng)建一個(gè)canvas對(duì)象
// 創(chuàng)建一個(gè)記錄儀
final recorder = new ui.PictureRecorder();
final canvas = new Canvas(
recorder,
new Rect.fromPoints(
new Offset(0.0, 0.0), new Offset(200.0, 200.0)));
2.在canvas上進(jìn)行繪制
final stroke = new Paint()
..color = Colors.grey
..style = PaintingStyle.stroke;
canvas.drawRect(
new Rect.fromLTWH(0.0, 0.0, 200.0, 200.0), stroke);
final paint = new Paint()
..color = color
..style = PaintingStyle.fill;
canvas.drawCircle(
new Offset(
widget.rd.nextDouble() * 200.0,
widget.rd.nextDouble() * 200.0,
),
20.0,
paint);
- 轉(zhuǎn)換和顯示
// 關(guān)閉記錄儀
final picture = recorder.endRecording();
final img = picture.toImage(200, 200);
final pngBytes = await img.toByteData(format: new ui.EncodingFormat.png());
// 顯示圖片
new Image.memory(new Uint8List.view(imgBytes.buffer));
Step.2 Canvas截取
當(dāng)我們懂得如何將canvas轉(zhuǎn)為圖片之后，我們簡(jiǎn)單看下canvas clip的代碼（這并不是本文主要講述的內(nèi)容，所以不做詳細(xì)說明），我們以canvas.clipPath截取圖片為例
// 繪制一個(gè)三角形的path
Path _path = Path()
..moveTo(100, 50)
..lineTo(50, 150)
..lineTo(150, 150)
..lineTo(100, 50);
canvas.clipPath(_path);
canvasClip.drawImageRect(
_image, // ui.Image
Rect.fromLTWH(0, 0, _image.width.toDouble(), _image.height.toDouble()),,
Rect.fromLTWH(0, 0, 200, 200), // 畫布Rect
Paint()
);
image
Step.3 獲取截取之后的圖形
我們已經(jīng)將圖片截取了椭坚，這個(gè)時(shí)候獲取的圖片大小是200*200的，但是我們只想要那個(gè)三角形怎么辦那搏色？思路如下:
- 獲取path圍成的矩形
- 將這個(gè)矩形移到畫布的左上角
- 轉(zhuǎn)成目標(biāo)大小的圖片
思路有了善茎，我們看實(shí)際解決辦法，首先針對(duì)第一點(diǎn)继榆，flutter Path 為我們提供了一個(gè)現(xiàn)成的方法 getBounds(), 看下官網(wǎng)的描述
getBounds() → Rect
Computes the bounding rectangle for this path.
然后看下第二點(diǎn)巾表，我們可以將之前生成的圖片通過位移畫在一個(gè)新的canvas的左上角，第三步在Step.1 已經(jīng)充分get了略吨，看下代碼：
// 獲取Path圍成的矩形
Rect _bounds = _path.getBounds();
// 上一步生成的圖片
ui.Image img = await picture.toImage(200, 200);
// 新建一個(gè)新的記錄儀和canvas
final recorder2 = ui.PictureRecorder();
final canvasClip = Canvas(recorder2, Rect.fromLTWH(0, 0, size.width, size.height));
canvasClip.drawImageRect(
img,
_bound, // _bound 中已經(jīng)包含左上角的offset集币，可以直接拿過來用
Rect.fromLTWH(0, 0, _bound.width, _bound.height),
Paint()
);
// 停止錄制 生成image
final picture2 = recorder2.endRecording();
ui.Image img2 = await picture2.toImage(size.width.toInt(), size.height.toInt());
final pngBytes = await img2.toByteData(format: ui.ImageByteFormat.png);
image
看起來沒什么變化？我們可以打印下輸出
image
very nice翠忠，大佬們?nèi)绻懈玫姆椒闊└嬖V下鞠苟，非常感謝
Step.4 獻(xiàn)上完整代碼
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:myapp/utils/image.dart';
import 'package:flutter/material.dart';
void main() => runApp(App());
const kCanvasSize = 200.0;
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ImageGenerator(),
),
debugShowCheckedModeBanner: false,
);
}
}
class ImageGenerator extends StatefulWidget {
@override
_ImageGeneratorState createState() => _ImageGeneratorState();
}
class _ImageGeneratorState extends State<ImageGenerator> {
ByteData imgBytes;
ui.Image _image;
@override
void initState() {
super.initState();
loadImage('assets/images/face.jpg').then((image) {
setState(() {
_image = image;
});
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: RaisedButton(
child: Text('Generate image'), onPressed: generateImage),
),
imgBytes != null
? Container(
child: Image.memory(
Uint8List.view(imgBytes.buffer),
width: kCanvasSize,
height: kCanvasSize,
))
: Container()
],
),
);
}
void generateImage() async {
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder,
Rect.fromPoints(Offset(0.0, 0.0), Offset(kCanvasSize, kCanvasSize)));
final stroke = new Paint()
..color = Colors.grey
..style = PaintingStyle.stroke;
canvas.drawRect(Rect.fromLTWH(0.0, 0.0, kCanvasSize, kCanvasSize), stroke);
Path _path = Path()
..moveTo(100, 50)
..lineTo(50, 150)
..lineTo(150, 150)
..lineTo(100, 50);
canvas.clipPath(_path);
Rect _bound = _path.getBounds();
canvas.drawImageRect(
_image,
Rect.fromLTWH(0, 0, _image.width.toDouble(), _image.height.toDouble()),
Rect.fromLTWH(0, 0, 200, 200),
Paint());
final picture = recorder.endRecording();
ui.Image img = await picture.toImage(200, 200);
print('img的尺寸: $img');
final recorder2 = ui.PictureRecorder();
final canvasClip =
Canvas(recorder2, Rect.fromLTWH(0, 0, _bound.width, _bound.height));
canvasClip.drawImageRect(
img, _bound, Rect.fromLTWH(0, 0, _bound.width, _bound.height), Paint());
final picture2 = recorder2.endRecording();
ui.Image img2 =
await picture2.toImage(_bound.width.toInt(), _bound.height.toInt());
print('img2的尺寸: $img2');
final pngBytes = await img2.toByteData(format: ui.ImageByteFormat.png);
setState(() {
imgBytes = pngBytes;
});
}
}
