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

huangapple
go评论100阅读模式
英文:

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文件，它将不会居中，而是渲染如下（将堆栈面板背景设置为白色以显示）：
UWP图像在从SVGImageSource设置源时未居中。

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)
:
UWP图像在从SVGImageSource设置源时未居中。

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的一个错误。

UWP图像在从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;

to

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

makes the image centering work. Definitely a bug with SVGImageSource

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

huangapple
  • 本文由 发表于 2023年8月5日 07:18:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76839562.html
  • svg
  • uwp
  • uwp-xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定