- 在这一篇中我们来实现图片的裁剪
- 这里我们使用到canvas的drawImageRect()方法
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
- 第一个参数Image image为需要image图片(UI.Image类型)
- 第二个参数Rect src为需要截取的矩形Rect
Rect.fromLTRB(0, 0, width/2, height/2)
意思就是从原图片中截取一个矩形，矩形的坐标从(0.0)到（宽的一半, 高的一半)
fromLTRB是指定left，top，right，bottom坐标，通过指定四个点来获取矩形
第三个为目标矩形Rect，即你想要在canvas上绘制的区域，
- 第三个参数设置为
Rect.fromLTWH(0, 0, 150, 150)
截取的矩形，在canvas的（0，0）坐标开始绘制,宽和高各为150，
fromLTWH是指定left和top坐标，并设置宽高来获取矩形
- 第四个参数paint为画笔
- 自定义图片裁剪
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
/// 图片裁剪
class ImageClipper extends CustomPainter {
final ui.Image image;
final double left;
final double top;
final double right;
final double bottom;
ImageClipper(this.image,{this.left = 0.3,this.top = 0.3,this.right = 0.6,this.bottom = 0.6});
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
Paint paint = Paint();
canvas.drawImageRect(
image,
Rect.fromLTRB(image.width * left, image.height * top,
image.width * right, image.height * bottom),
Rect.fromLTWH(0, 0, size.width, size.height),
paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
- 将图片转化为流，并添加监听，在图片流加载完成之后获取到ui.Image
Future<ui.Image> _loadImge() async {
ImageStream imageStream = NetworkImage(pic).resolve(ImageConfiguration());
Completer<ui.Image> completer = Completer<ui.Image>();
void imageListener(ImageInfo info, bool synchronousCall) {
ui.Image image = info.image;
completer.complete(image);
imageStream.removeListener(ImageStreamListener(imageListener));
}
imageStream.addListener(ImageStreamListener(imageListener));
return completer.future;
}
4.得到image之后我们使用自定义的裁剪类代码如下
clip() async {
ui.Image uiImage;
_loadImge().then((image){uiImage = image;}).whenComplete(() {
clipper = ImageClipper(uiImage);
setState(() {});
});
}
- 完整代码
import 'package:flutter/material.dart';
import 'package:flutter_trip/util/ImageClipper.dart';
import 'dart:ui' as ui;
import 'dart:async';
const String pic =
'http://pic75.nipic.com/file/20150821/9448607_145742365000_2.jpg';
class ImageClipperTest extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ImageClipperTestState();
}
}
class _ImageClipperTestState extends State<ImageClipperTest> {
ImageClipper clipper;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ImageClipper'),
),
body: Center(
child: Column(
children: <Widget>[
SizedBox(
child: Container(color: Colors.grey, child: Image.network(pic,fit: BoxFit.fill,)),
width: 200,
height: 150,
),
SizedBox(
height: 50,
),
Container(
color: Colors.green,
child: CustomPaint(
painter: clipper,
size: Size(100, 100),
)),
RaisedButton(child: Text('Clip'), onPressed: () => clip())
],
),
),
);
}
Future<ui.Image> _loadImge() async {
ImageStream imageStream = NetworkImage(pic).resolve(ImageConfiguration());
Completer<ui.Image> completer = Completer<ui.Image>();
void imageListener(ImageInfo info, bool synchronousCall) {
ui.Image image = info.image;
completer.complete(image);
imageStream.removeListener(ImageStreamListener(imageListener));
}
imageStream.addListener(ImageStreamListener(imageListener));
return completer.future;
}
clip() async {
ui.Image uiImage;
_loadImge().then((image){uiImage = image;}).whenComplete(() {
clipper = ImageClipper(uiImage);
setState(() {});
});
}
}
效果图片
