我按照这篇很棒的博客文章中给出的说明,在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);
}
1条答案
按热度按时间gab6jxml1#
事实证明,这种差异是两种设备具有非常不同的显示尺寸的结果。
一个是iPhone12 Mini,另一个是HTC One M9。因为背景图像被设置为中心,最初的大小为1.200x1.200像素,所以在两个设备上看起来都不一样。
为了使图像在两个设备上匹配,我需要在我的Android设备上放大它。
此外,需要调整模糊半径以达到相同的效果。
我想,我需要找到一种方法来计算与屏幕尺寸有关的比例/半径转换的比率。- )