如何使用 xamarin 表单中的 ZXing.Net.Mobile 避免扭曲的 Android 相机预览

Question

I am Applying ZXing.Net.Mobile for barcode scan and when I run the application I get stretched camera preview.

my code looks like...

<Grid>

            <forms:ZXingScannerView x:Name="_scanView" OnScanResult="_scanView_OnOnScanResult" IsScanning="true"
                                    HeightRequest="300" 
                                    VerticalOptions="CenterAndExpand"
                                    HorizontalOptions="CenterAndExpand"
                                    />
</Grid>

How can I avoid this?

Update

I tried https://laptrinhx.com/how-to-avoid-a-distorted-android-camera-preview-with-zxing-net-mobile-4270557032/

interface

public interface IZXingHelper
    {
        MobileBarcodeScanningOptions.CameraResolutionSelectorDelegate TestingDelegate { get; set; }
    }

implementation in Android

public class TestingResolution : IZXingHelper
    {
        public MobileBarcodeScanningOptions.CameraResolutionSelectorDelegate TestingDelegate { get; set; }

        public CameraResolution SelectLowestResolutionMatchingDisplayAspectRatio(List<CameraResolution> availableResolutions)
        {
            CameraResolution result = null;

            //a tolerance of 0.1 should not be recognizable for users
            double aspectTolerance = 0.1;

            //calculating our targetRatio
            var targetRatio = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Width;
            var targetHeight = DeviceDisplay.MainDisplayInfo.Height;
            var minDiff = double.MaxValue;

            //camera API lists all available resolutions from highest to lowest, perfect for us
            //making use of this sorting, following code runs some comparisons to select the lowest resolution that matches the screen aspect ratio
            //selecting the lowest makes QR detection actual faster most of the time
            foreach (var r in availableResolutions)
            {
                //if current ratio is bigger than our tolerance, move on
                //camera resolution is provided landscape ...
                //if (Math.Abs(((double)r.Width / r.Height) - targetRatio) > aspectTolerance)
                //    continue;
                //else
                if (Math.Abs(r.Height - targetHeight) < minDiff)
                    minDiff = Math.Abs(r.Height - targetHeight);
                result = r;
            }
            return result;
        }

        public TestingResolution()
        {
            List<CameraResolution> resolution = new List<CameraResolution>
            {
                new CameraResolution()
                {
                    Height = 200,
                    Width = 300
                }
            };

            TestingDelegate.Invoke(new List<CameraResolution> {SelectLowestResolutionMatchingDisplayAspectRatio(resolution)});
        }
    }

implementation in mypage.xcml.cs class

public PartialPagexaml()
        {
            InitializeComponent();

            var options = new ZXing.Mobile.MobileBarcodeScanningOptions
            {
                PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.QR_CODE},
                CameraResolutionSelector = DependencyService.Get<IZXingHelper>().TestingDelegate
            };

            _scanView.Options = options;
        }

there I am getting Target Invocation Error in my page.xaml.cs class in below line.

var options = new ZXing.Mobile.MobileBarcodeScanningOptions
            {
                PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.QR_CODE},
                CameraResolutionSelector = DependencyService.Get<IZXingHelper>().TestingDelegate
            };

can I get a help to fix this?

Answer 1

looking to your code I guess you must add WidthRequest = "300" .

As you have just requested for the Height parameter, the height is set to "300" but you haven't mentioned for width parameter & you have set VerticleOptions="CenterAndExpand" so it will occupy the whole width of the screen giving you a stretch effect. You must specify WidthRequest according to your IU appearance.

Hint - Let the barcode scanner open in full screen as it is the standard way to use barcode scanning, you can remove HeightRequest= "300" from your code.

Answer 2

Since you had used Grid . Don't forget to set the Row and Column .

For example , if you want to put the scan view in the center of the Grid .

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="0.33*" />
        <RowDefinition Height="0.33*" />
        <RowDefinition Height="0.33*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="0.33*" />
        <ColumnDefinition Width="0.33*" />
        <ColumnDefinition Width="0.33*" />

    </Grid.ColumnDefinitions>

    <forms:ZXingScannerView Grid.Row="1" Grid.Column="1" x:Name="_scanView" OnScanResult="_scanView_OnOnScanResult" IsScanning="true"

                                VerticalOptions="CenterAndExpand"
                                HorizontalOptions="CenterAndExpand"
                                />

</Grid>

If you do want to set the fix Height . Use StackLayout is better .

<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <!-- Place new controls here -->
        <forms:ZXingScannerView  x:Name="_scanView" 
                                 OnScanResult="_scanView_OnOnScanResult" 
                                 IsScanning="true"
                                 VerticalOptions="CenterAndExpand"
                                 HorizontalOptions="CenterAndExpand"
                                 HeightRequest="300" WidthRequest="400"
                                    />
</StackLayout>