android 如何使用.NET MAUI跨平台“高斯”模糊化图像

x759pob2  于 2022-11-27  发布在  Android
关注(0)|答案(1)|浏览(249)

我按照这篇很棒的博客文章中给出的说明,在iOS和Android上的.NET MAUI应用程序中模糊化了一张图片:
https://vladislavantonyuk.azurewebsites.net/articles/Creating-beautiful-image-effects-using-.NET-MAUI
然而,两个平台上的结果差异极大,我喜欢iPhone上的结果,但我对Android上模糊的图像感到失望。
看看这两个平台使用的实现,您是否可以建议更改Android代码,使其看起来更像iPhone上的图像?
| iOS版本|安卓版|
| - -|- -|
|

|

|
下面是我的MainPage.xaml文件的内容:

<Grid>
        <Image 
            Source="c64.png"
            Aspect="Center">
            <Image.Behaviors>
                <blur:BlurBehavior Radius="66" />
            </Image.Behaviors>
        </Image>
        <Grid>
            <Image 
                VerticalOptions="Start"
                Margin="0,100,0,0"
                Source="c64.png"                  
                HeightRequest="300" 
                WidthRequest="300">
                <Image.Clip>
                    <RoundRectangleGeometry CornerRadius="20" Rect="0,0,300,300" />
                </Image.Clip>
                <Image.Shadow>
                    <Shadow 
                        Brush="Black"
                        Offset="0,0"
                        Radius="20"
                        Opacity="0.5" />
                </Image.Shadow>
            </Image>           
        </Grid>
    </Grid>

负责在Android上渲染模糊图像的相关代码片段如下所示:

void SetRendererEffect(ImageView imageView, float radius)
    {
        if (OperatingSystem.IsAndroidVersionAtLeast(31))
        {
            var renderEffect = radius > 0 ? GetEffect(radius) : null;
            imageView.SetRenderEffect(renderEffect);
        }
    }

    static RenderEffect? GetEffect(float radius)
    {
        return OperatingSystem.IsAndroidVersionAtLeast(31) ?
            RenderEffect.CreateBlurEffect(radius, radius, Shader.TileMode.Decal!) :
            null;
    }

在iOS上渲染模糊图像的相应代码如下所示:

void SetRendererEffect(UIImageView imageView, float radius)
    {
        if (originalImage is null)
        {
            return;
        }

        var myContext = CIContext.Create();
        var inputImage = new CIImage(originalImage);
        var filter = new CIGaussianBlur
        {
            InputImage = inputImage,
            Radius = radius
        };
        var resultImage = myContext.CreateCGImage(filter.OutputImage!, inputImage.Extent);
        SetImage(imageView, resultImage);
    }
gab6jxml

gab6jxml1#

事实证明,这种差异是两种设备具有非常不同的显示尺寸的结果。
一个是iPhone12 Mini,另一个是HTC One M9。因为背景图像被设置为中心,最初的大小为1.200x1.200像素,所以在两个设备上看起来都不一样。
为了使图像在两个设备上匹配,我需要在我的Android设备上放大它。
此外,需要调整模糊半径以达到相同的效果。
我想,我需要找到一种方法来计算与屏幕尺寸有关的比例/半径转换的比率。- )

相关问题