我正试图在我的应用程序中拍摄方形图片。我正在使用camera包,我正在尝试显示CameraPreview
小部件的中心正方形裁剪版本。
我的目标是显示预览的中心正方形(全宽),从顶部和底部裁剪出均匀的数量。
我努力让这个工作,所以我创建了一个使用固定图像的最小例子。 (为我在椅子上的沉闷画面道歉):
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(),
home: Scaffold(
body: Example(),
),
);
}
}
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
CroppedCameraPreview(),
// Something to occupy the rest of the space
Expanded(
child: Container(),
)
],
);
}
}
class CroppedCameraPreview extends StatelessWidget {
@override
Widget build(BuildContext context) {
// We will pretend this is a camera preview (to make demo easier)
var cameraImage = Image.network("https://i.imgur.com/gZfg4jm.jpg");
var aspectRatio = 1280 / 720;
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: ClipRect(
child: new OverflowBox(
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.fitWidth,
child: cameraImage,
),
),
),
);
}
}
这很好 - 我得到一个全屏宽度的图像,中心裁剪并推到我的应用程序的顶部。
但是,如果我将此代码放入我现有的应用程序并用cameraImage
替换CameraPreview
,我会遇到很多布局错误:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: TextureBox object was given an infinite size during layout.
flutter: This probably means that it is a render object that tries to be as big as possible, but it was put
flutter: inside another render object that allows its children to pick their own size.
flutter: The nearest ancestor providing an unbounded width constraint is:
flutter: RenderFittedBox#0bd54 NEEDS-LAYOUT NEEDS-PAINT
flutter: creator: FittedBox ← OverflowBox ← ClipRect ← ConstrainedBox ← Container ← Stack ← ConstrainedBox
flutter: ← Container ← CameraWidget ← Column ← CameraPage ← MediaQuery ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0) (can use size)
flutter: constraints: BoxConstraints(w=320.0, h=320.0)
flutter: size: MISSING
flutter: fit: fitWidth
flutter: alignment: center
flutter: textDirection: ltr
flutter: The nearest ancestor providing an unbounded height constraint is:
flutter: RenderFittedBox#0bd54 NEEDS-LAYOUT NEEDS-PAINT
flutter: creator: FittedBox ← OverflowBox ← ClipRect ← ConstrainedBox ← Container ← Stack ← ConstrainedBox
flutter: ← Container ← CameraWidget ← Column ← CameraPage ← MediaQuery ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0) (can use size)
flutter: constraints: BoxConstraints(w=320.0, h=320.0)
flutter: size: MISSING
flutter: fit: fitWidth
flutter: alignment: center
flutter: textDirection: ltr
flutter: The constraints that applied to the TextureBox were:
flutter: BoxConstraints(unconstrained)
flutter: The exact size it was given was:
flutter: Size(Infinity, Infinity)
flutter: See https://flutter.io/layout/ for more information.
任何人都可以建议为什么我的预览错误以及如何避免它们?
我通过将它包装在CameraPreview
中来为我的Container
实例提供特定大小来解决这个问题:
var size = MediaQuery.of(context).size.width;
// ...
Container(
width: size,
height: size,
child: ClipRect(
child: OverflowBox(
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Container(
width: size,
height:
size / widget.cameraController.value.aspectRatio,
child: camera, // this is my CameraPreview
),
),
),
),
);
为了回应Luke的评论,我然后使用这个代码来裁剪生成的图像。 (因为即使预览是正方形,捕获的图像仍然是标准比率)。
Future<String> _resizePhoto(String filePath) async {
ImageProperties properties =
await FlutterNativeImage.getImageProperties(filePath);
int width = properties.width;
var offset = (properties.height - properties.width) / 2;
File croppedFile = await FlutterNativeImage.cropImage(
filePath, 0, offset.round(), width, width);
return croppedFile.path;
}
这使用https://github.com/btastic/flutter_native_image。我使用这段代码已经有一段时间了 - 认为它目前只适用于肖像图像,但应该可以轻松扩展以处理景观。