英文:
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:
<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>
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 == "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;
}
}
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:
<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>
答案1
得分: 0
感谢对一个合法问题的负评。原来将SVG从
width="300" height="300"
更改为
viewBox="0 0 300 300"
可以使图像居中。这绝对是SVGImageSource
的一个错误。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论