Flutter裁剪图片

最近在学习中需要用到裁剪图片,记录一下解决方法

思路:

使用canvas的drawImageRect()方法,对Image进行裁剪,这里的Image需要 'dart:ui' 库中的Image。

1. canvas的drawImageRect()方法

 

1
drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void

  

①第一个参数是'dart:ui' 库中的Image。

②第二个参数为你需要截取的矩形Rect,举个栗子:截取一张图片,原图的宽高分别为w和h,

将第二个参数设置为:

1
Rect.fromLTRB(0, 0, w/2, h/2)

  

意思就是从原图片中截取一个矩形,矩形的坐标从(0.0)到(w/2, h/2)。

这里的是fromLTWH意思是指定left,top,right,bottom坐标,通过指定四个点来获取矩形

③第三个为目标矩形Rect,即你想要在canvas上绘制的区域,

举个栗子:接着上面所讲的,将第三个参数设置为

1
Rect.fromLTWH(0, 0, 100, 100), paint);

  

意思就是将上面截取的矩形,在canvas的(0,0)坐标开始绘制,绘制的宽和高为100,

这里的是fromLTWH意思是指定left和top坐标,并设置宽高来获取矩形

④第四个参数为画笔。

2.'dart:ui' 库中的Image

这里我们要引入'dart:ui' 取别名为ui,避免库里的方法与'package:flutter/material.dart'中的方法重名冲突

1
import 'dart:ui' as ui;

  

从我们平常用的图片去获取ui库下的Image的方法如下:

将图片转化为流,并添加监听,在图片流加载完成之后获取到ui.Image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Future<ui.Image> imageLoader() {
 
    ImageStream imageStream = NetworkImage(
 
            'https://avatars0.githubusercontent.com/u/45789654?s=460&v=4')
 
        .resolve(ImageConfiguration.empty);
 
    Completer<ui.Image> imageCompleter = Completer<ui.Image>();
 
    void imageListener(ImageInfo info, bool synchronousCall) {
 
      ui.Image image = info.image;
 
      imageCompleter.complete(image);
 
      imageStream.removeListener(imageListener);
 
    }
 
    imageStream.addListener(imageListener);
 
    return imageCompleter.future;
 
  }

  

1
2
3
4
5
6
7
8
9
10
11
12
13
clip() async {
 
    ui.Image _image;
 
    imageLoader().then((image) => _image = image).whenComplete(() {
 
      clipper = ImageClipper(_image,left: 0,top: 0,right: 0.5,bottom: 0.5);
 
      setState(() {});
 
    });
 
  }

  

通过clip()方法得到ImageClipper对象,并且setState通知界面更新Container的内容,

 

1
Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size(50, 50),)),

  

ImageClipper中的核心方法

 

1
2
3
4
5
6
7
8
9
10
11
@override
 
  void paint(Canvas canvas, Size size) {
 
    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);
 
  }

  

posted @   CrossPython  阅读(3484)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示