web-dev-qa-db-ja.com

フラッターカメラが引き伸ばされて見える

私はフラッターをいじくり回してきましたが、今のところそれを愛していますが、カメラを機能させるのに問題があります。

私はこのページの指示に従います https://pub.dartlang.org/packages/camera と動作します。ただし、カメラは電話の画面に収まるように引き伸ばされますが、画像は歪んでいて本来よりも高くなっています。カメラを使用する他のアプリはカメラの比率を維持しているようですが、カメラが引き伸ばされないようにしても画面全体に表示されるようにする方法はありますか？

cameradartandroid-cameraflutter
9
Angus Allman

lase によるソリューションを基にして、これはデバイスのアスペクト比がカメラの比率と異なる場合でも機能します。

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Transform.scale(
  scale: controller.value.aspectRatio / deviceRatio,
  child: Center(
    child: AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: CameraPreview(controller),
    ),
  ),
);
29
Marek Lisý

Marek Lisy の答えを基に構築したいのは、コンテナが壊れてしまうためです。私の場合、TabBarViewを使用していますが、その回答によりタブへのスナップが正しく行われません。以下に示すように、ClipRectを使用してこれを修正しました。

final size = MediaQuery.of(context).size;

if (!controller.value.isInitialized) {
  return Container();
}
return ClipRect(
  child: Container(
    child: Transform.scale(
      scale: controller.value.aspectRatio / size.aspectRatio,
      child: Center(
        child: AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: CameraPreview(controller),
        ),
      ),
    ),
  ),
);

幸運を祈ります！私はこれを理解しようと一時間かそこらを費やしました。うまくいけば、誰も同じ問題を抱えていません。

12
alcomide

同様の問題があり、Richardの回答は役に立ちましたが、プレビューが小さすぎるという問題もありました。より良い方法があるかもしれませんが、私はこれを次のようにアスペクト比の反転によってこれをスケーリングすることで解決できました：

return new Scaffold(
  appBar: new AppBar(title: new Text('Capture')),
  body: new Transform.scale(
      scale: 1 / controller.value.aspectRatio,
      child: new Center(
        child: new AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: new CameraPreview(controller)),
      )),
);

裏返して、これは次のようになります。

  1. 正しいアスペクト比でCameraPreviewを構築します
  2. このプレビューをビューの中央に配置します
  3. アスペクト比に基づいてプレビューが画面全体に適切に表示されるようにするスケーリング変換を適用する
10
lase

幅と高さを自分で正しい比率に設定するか、AspectRatioを使用して、正しいアスペクト比を提供するウィジェットでプレビューをラップする必要があります。たとえば、カメラプラグインの例では次を使用します。

new Expanded(
  child: new Padding(
    padding: const EdgeInsets.all(5.0),
    child: new Center(
      child: new AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: new CameraPreview(controller),
      ),
    ),
  ),
),
5
Richard Heap

追加したいのは、カメラプレビューを中央に配置した後、フルスクリーンではない場合、カメラの解像度をveryHighに変更すると、フルスクリーンになります。

CameraController( cameras[0], ResolutionPreset.veryHigh )

0
iRedia Ebikade

私はすべての解決策を試しましたが、それらのすべてはいくつかの条件で問題があります。これを試してください、それは魅力のように機能します：

最初：

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;

次に：

return Transform.scale(
   scale: 1,
   child: Center(
     child: AspectRatio(
       aspectRatio: deviceRatio,
       child: CameraPreview(_cameraController),
     ),
   ),
);

それが役に立てば幸い ...

0
Ali Esfandiari