带有剪辑椭圆的颤振圆形文件图像答案

【问题标题】：Flutter circle file image with clip oval带有剪辑椭圆的颤振圆形文件图像
【发布时间】：2018-11-09 06:07:00
【问题描述】：

我想剪辑从图像选择器插件中提取的图像，但它不适用于 BoxDecoration.circle ，所以我想用椭圆形剪辑器将其剪辑为圆形。如何实现？

【问题讨论】：

你为什么不使用 CircleAvatar 小部件？
@VinothKumar ，因为我的图像来自图像选择器插件，类型为文件，所以“参数类型'Image'不能分配给参数类型'ImageProvider'。”

【解决方案1】：

您可以使用CircleAvatar小部件显示获取的图像，使其成为circular。

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: new MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Center(
        child: _image == null
            ? new Text('No image selected.')
            : new CircleAvatar(backgroundImage: new FileImage(_image), radius: 200.0,),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: new Icon(Icons.add_a_photo),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您也可以使用ClipOval 圈出图片。只需使用ClipOval 包装您的文件图像。

ClipOval(
  child: FileImage(_image)
),

【讨论】：

【解决方案3】：

如果你想使用 BoxDecoration.Circle，这是你需要做的

                 Container(
                    width: 120.0,
                    height: 120.0,
                    decoration:  BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.fill,
                            image:  FileImage(_image)
                          )
                        )
                      ),

希望对你有帮助

【讨论】：

【解决方案4】：

我已经想通了，这是我稍后将用于剪辑它的子类的类

class CircleRevealClipper extends CustomClipper<Rect> {   CircleRevealClipper();

  @override   Rect getClip(Size size) {
    final epicenter = new Offset(size.width, size.height);

    // Calculate distance from epicenter to the top left corner to make sure clip the image into circle.

    final distanceToCorner = epicenter.dy;

    final radius = distanceToCorner;
    final diameter = radius;

    return new Rect.fromLTWH(
        epicenter.dx - radius, epicenter.dy - radius, diameter, diameter);   }

  @override   bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;   } }

【讨论】：

既然已经实现了方法，为什么还要使用这么长的方法？或者你的方法有更多的控制权？
这很好用。但是这个圆圈并没有以我为中心。我将fromLTWH函数的左参数划分为： return Rect.fromLTWH( (epicenter.dx - radius) / 2, epicenter.dy - radius, diameter, diameter);现在它居中。