Flutter裁剪图片

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

思路:

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

1. canvas的drawImageRect()方法

 

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

  

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

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

将第二个参数设置为:

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

  

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

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

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

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

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’中的方法重名冲突

import 'dart:ui' as ui;

  

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

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

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;

  }

  

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的内容,

 

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

  

ImageClipper中的核心方法

 

@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);

  }

  

    原文作者:CrossPython
    原文地址: https://www.cnblogs.com/pythonClub/p/10859091.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞