Question

我想要剪切我从图像选择器插件中提取的图像，它不能与BoxDecoration.circle一起使用，因此我想将其剪切为带有椭圆剪切器的圆圈。如何实现它？

Answer 1

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

ClipOval(
  child: FileImage(_image)
),

Answer 2

您可以使用 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),
      ),
    );
  }
}

Answer 3

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

[TestClass()]
public partial class MyTest : SqlDatabaseTestClass
{
    public MyTest()
    {
        InitializeComponent();
        InitializeComponentMine(); // This works but I need the designer to show my changes
    }
    #region Designer support code

    /// <summary> 
    /// Required method for Designer support - do not modify 
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {

    }

    #endregion      
}

我希望这会有所帮助

Answer 4

我已经弄明白了，这个类我以后会用来剪掉它的孩子

类CircleRevealClipper扩展CustomClipper {
  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 oldClipper）{ 返回true; }}

颤振圈文件图像与剪辑椭圆形

4 个答案: