.NET Maui:矢量/SVG 闪屏未正确调整大小

分享于2022年10月08日 .net .net-maui c# maui svg 问答
【问题标题】:.NET Maui: Vector/SVG splashscreen not correctly resized.NET Maui:矢量/SVG 闪屏未正确调整大小
【发布时间】:2022-10-07 09:36:09
【问题描述】:

测试为毛伊岛应用程序添加自定义启动画面,我读了一些 Microsoft docs that says

在构建时,初始屏幕图像被调整为正确的大小 对于目标平台和设备。然后调整大小的启动画面 添加到您的应用程序包中。

但是,这不是我所看到的;取而代之的是,图像被屏幕盖住并且不适应。复制:

  1. 安装 VS Studio 2022 17.1.0 Preview 3.0 和最新的 MAUI
  2. 创建一个新的 .NET Maui App (Preview) 项目
  3. 添加一个SVG文件,我用的是这个: https://publicdomainvectors.org/download.php?file=liftarn_Black_horse.svg ,放在 Resources/Images
  4. 在 VS 中将文件重命名为 \"horse.svg\"(否则会出现构建错误)
  5. 在 Properties 中,将 Build Action 设置为 MauiSplashScreen;这将在 csproj 文件中创建一个新条目
  6. 我在 csproj 文件中有两个 标签,所以我手动删除了前一个(注意:有一个错误,因为 svg 的属性面板不再显示 MauiSplashScreen
  7. 在模拟器上运行应用程序,我使用的是 Pixel 2 Android Pie 9

    闪屏出现时,不适应屏幕大小,所以被封顶。看起来像这样(我添加了红色背景):

    但整个 SVG 图像看起来像:

    所以,我想知道上面的引用是什么意思?在我看来,我必须以某种方式手动缩小 SVG/图像,以适应屏幕?

    更新

    我用视口替换了 svg 中的高度和宽度,但结果是一样的:

  • svg 元素不是 viewBox 属性,而是具有 dardcoded 宽度和高度。
  • 需要详细说明吗?如何修改 svg 来解决这个问题?
  • 同样的问题,你找到解决方案了吗?
  • 使用我的基于 Skia 的 SVG 图像控件,而不是将图像转换为 PNG 的常规图像控件,您将不会遇到这些问题。 github.com/FreakyAli/MAUI.FreakyControls :)

【解决方案1】:

这是您的代码的简化版本。由于某些标签未关闭,我已删除转换后的组。

如您所见,我删除了硬编码的宽度和高度并添加了一个 viewBox。现在 rahe svg 将采用所有可用的宽度,即父级的宽度。


    

【讨论】:

  • 谢谢!不幸的是,当我用视图框替换高度和宽度时它不起作用,同样的问题。更新了问题。