2023年8月5日 07:18:13go评论94阅读模式

英文:

UWP Image not centered when source set from SVGImageSource

问题

以下是您提供的代码的中文翻译：

我在我的网格中心有一张图像，代码如下：

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Background="White">
    <Image Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="capturedPhoto" Height="{x:Bind Path=CrosshairHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="{x:Bind Path=CrosshairWidth, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

我在.cs文件中设置了图像的源，代码如下：

ImageProperties imageProperties = await crosshairFile.Properties.GetImagePropertiesAsync();
using (IRandomAccessStream fileStream = await crosshairFile.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
    if (crosshairFile.ContentType == "image/svg+xml")
    {
        SvgImageSource svgImage = new SvgImageSource();
        svgImage.RasterizePixelHeight = imageProperties.Height;
        svgImage.RasterizePixelWidth = imageProperties.Width;
        await svgImage.SetSourceAsync(fileStream);
        capturedPhoto.Source = svgImage;
    }
    else
    {
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.DecodePixelHeight = 100;
        bitmapImage.DecodePixelWidth = 100;

        await bitmapImage.SetSourceAsync(fileStream);
        capturedPhoto.Source = bitmapImage;
    }
}

对于使用BitmapImage的PNG图像，它似乎被居中显示。然而，对于XML文件，它将不会居中，而是渲染如下（将堆栈面板背景设置为白色以显示）：

SVG文件内容如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" style="overflow: hidden; display: block;">
    <defs></defs>
    <g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1">
        <path transform="matrix(1 0 0 1 150 80)" id="two-106" d="M -5 -25 L 5 -25 L 5 25 L -5 25 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path>
        <path transform="matrix(1 0 0 1 150 220)" id="two-107" d="M -5 -25 L 5 -25 L 5 25 L -5 25 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path>
        <path transform="matrix(1 0 0 1 80 150)" id="two-108" d="M -25 -5 L 25 -5 L 25 5 L -25 5 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path>
        <path transform="matrix(1 0 0 1 220 150)" id="two-109" d="M -25 -5 L 25 -5 L 25 5 L -25 5 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path>
        <path transform="matrix(1 0 0 1 150 150)" id="two-110" d="M 10 0 C 10 2.111792 9.33145 4.169376 8.090169 5.877852 C 6.848889 7.586328 5.098603 8.857985 3.090169 9.510565 C 1.081735 10.163144 -1.081736 10.163144 -3.09017 9.510565 C -5.098604 8.857985 -6.84889 7.586328 -8.09017 5.877852 C -9.331451 4.169376 -10 2.111792 -10 0 C -10 -2.111793 -9.331451 -4.169377 -8.09017 -5.877853 C -6.84889 -7.586329 -5.098604 -8.857986 -3.09017 -9.510566 C -1.081736 -10.163145 1.081735 -10.163145 3.090169 -9.510566 C 5.098603 -8.857986 6.848889 -7.586329 8.090169 -5.877853 C 9.33145 -4.169377 10 -2.111793 10 0 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path>
    </g>
</svg>

希望这能帮助您理解代码的中文翻译。

英文:

I have an image centered in my grid like this:

&lt;StackPanel VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot; Background=&quot;White&quot;&gt;
&lt;Image Stretch=&quot;Uniform&quot; VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot; x:Name=&quot;capturedPhoto&quot; Height=&quot;{x:Bind Path=CrosshairHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}&quot; Width=&quot;{x:Bind Path=CrosshairWidth, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}&quot;/&gt;
&lt;/StackPanel&gt;

And I set the source in the .cs file like this:

    ImageProperties imageProperties = await crosshairFile.Properties.GetImagePropertiesAsync();
using (IRandomAccessStream fileStream = await crosshairFile.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
if (crosshairFile.ContentType == &quot;image/svg+xml&quot;)
{
SvgImageSource svgImage = new SvgImageSource();
svgImage.RasterizePixelHeight = imageProperties.Height;
svgImage.RasterizePixelWidth = imageProperties.Width;
await svgImage.SetSourceAsync(fileStream);
capturedPhoto.Source = svgImage;
}
else
{
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.DecodePixelHeight = 100;
bitmapImage.DecodePixelWidth = 100;
await bitmapImage.SetSourceAsync(fileStream);
capturedPhoto.Source = bitmapImage;
}
}

For PNG images using the BitmapImage, it seems to be centered fine. For XMLs however, it will not be centered, but rather rendering like this (set stack panel background to white to show)
:

The SVG file contents are this:

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;overflow: hidden; display: block;&quot;&gt;&lt;defs&gt;&lt;/defs&gt;&lt;g id=&quot;two-0&quot; transform=&quot;matrix(1 0 0 1 0 0)&quot; opacity=&quot;1&quot;&gt;&lt;path transform=&quot;matrix(1 0 0 1 150 80)&quot; id=&quot;two-106&quot; d=&quot;M -5 -25 L 5 -25 L 5 25 L -5 25 Z &quot; fill=&quot;#00FF4C&quot; stroke=&quot;#000&quot; stroke-width=&quot;1&quot; stroke-opacity=&quot;1&quot; fill-opacity=&quot;1&quot; visibility=&quot;visible&quot; stroke-linecap=&quot;butt&quot; stroke-linejoin=&quot;miter&quot; stroke-miterlimit=&quot;4&quot;&gt;&lt;/path&gt;&lt;path transform=&quot;matrix(1 0 0 1 150 220)&quot; id=&quot;two-107&quot; d=&quot;M -5 -25 L 5 -25 L 5 25 L -5 25 Z &quot; fill=&quot;#00FF4C&quot; stroke=&quot;#000&quot; stroke-width=&quot;1&quot; stroke-opacity=&quot;1&quot; fill-opacity=&quot;1&quot; visibility=&quot;visible&quot; stroke-linecap=&quot;butt&quot; stroke-linejoin=&quot;miter&quot; stroke-miterlimit=&quot;4&quot;&gt;&lt;/path&gt;&lt;path transform=&quot;matrix(1 0 0 1 80 150)&quot; id=&quot;two-108&quot; d=&quot;M -25 -5 L 25 -5 L 25 5 L -25 5 Z &quot; fill=&quot;#00FF4C&quot; stroke=&quot;#000&quot; stroke-width=&quot;1&quot; stroke-opacity=&quot;1&quot; fill-opacity=&quot;1&quot; visibility=&quot;visible&quot; stroke-linecap=&quot;butt&quot; stroke-linejoin=&quot;miter&quot; stroke-miterlimit=&quot;4&quot;&gt;&lt;/path&gt;&lt;path transform=&quot;matrix(1 0 0 1 220 150)&quot; id=&quot;two-109&quot; d=&quot;M -25 -5 L 25 -5 L 25 5 L -25 5 Z &quot; fill=&quot;#00FF4C&quot; stroke=&quot;#000&quot; stroke-width=&quot;1&quot; stroke-opacity=&quot;1&quot; fill-opacity=&quot;1&quot; visibility=&quot;visible&quot; stroke-linecap=&quot;butt&quot; stroke-linejoin=&quot;miter&quot; stroke-miterlimit=&quot;4&quot;&gt;&lt;/path&gt;&lt;path transform=&quot;matrix(1 0 0 1 150 150)&quot; id=&quot;two-110&quot; d=&quot;M 10 0 C 10 2.111792 9.33145 4.169376 8.090169 5.877852 C 6.848889 7.586328 5.098603 8.857985 3.090169 9.510565 C 1.081735 10.163144 -1.081736 10.163144 -3.09017 9.510565 C -5.098604 8.857985 -6.84889 7.586328 -8.09017 5.877852 C -9.331451 4.169376 -10 2.111792 -10 0 C -10 -2.111793 -9.331451 -4.169377 -8.09017 -5.877853 C -6.84889 -7.586329 -5.098604 -8.857986 -3.09017 -9.510566 C -1.081736 -10.163145 1.081735 -10.163145 3.090169 -9.510566 C 5.098603 -8.857986 6.848889 -7.586329 8.090169 -5.877853 C 9.33145 -4.169377 10 -2.111793 10 0 Z &quot; fill=&quot;#00FF4C&quot; stroke=&quot;#000&quot; stroke-width=&quot;1&quot; stroke-opacity=&quot;1&quot; fill-opacity=&quot;1&quot; visibility=&quot;visible&quot; stroke-linecap=&quot;butt&quot; stroke-linejoin=&quot;miter&quot; stroke-miterlimit=&quot;4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;

答案1

得分: 0

感谢对一个合法问题的负评。原来将SVG从

width="300" height="300"

更改为

viewBox="0 0 300 300"

可以使图像居中。这绝对是SVGImageSource的一个错误。

英文:

Thanks for the downvotes on what is a legitimate question. Turns out that changing the SVG from

width=&quot;300&quot; height=&quot;300&quot;

viewBox=&quot;0 0 300 300&quot;

makes the image centering work. Definitely a bug with SVGImageSource

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

UWP图像在从SVGImageSource设置源时未居中。

问题

答案1

创建一个固定、垂直距离的SVG路径，使用JavaScript。

如何通过<use>元素来调整SVG图标的大小，就像调整图像一样。

如何将SVG大小精确调整以包裹其内容？

如何使SVG图像无法拖动和点击。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论