如何在 wpf 中使用 Image 的正确方法答案

【问题标题】：Correct way to show sharp images如何在 wpf 中使用 Image 的正确方法
【发布时间】：2017-05-29 18:44:38
【问题描述】：

我正在尝试将所有图标更改为某种矢量图像，以便更好地显示更大尺寸的“文本、应用程序和其他项目”。

我尝试了 svg 图像格式，但它看起来并不清晰。（我尝试了很多库，最好的是sharpvector）。

清晰的图像：

尺寸为 250% 时图像不清晰：

使用带有 inkscape 的 svg 转换为 XAML：

SVG 标记是：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<circle fill="#FFFFFF" cx="7.9" cy="7.9" r="7.461"/>
<radialGradient id="SVGID_1_" cx="7.9004" cy="7.9004" r="7.4609" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="0.1198" style="stop-color:#DDEEFF;stop-opacity:0.1453"/>
    <stop  offset="0.4662" style="stop-color:#80C1FF;stop-opacity:0.5656"/>
    <stop  offset="0.7087" style="stop-color:#45A4FF;stop-opacity:0.8598"/>
    <stop  offset="0.8242" style="stop-color:#2E99FF"/>
</radialGradient>
<circle fill="url(#SVGID_1_)" cx="7.9" cy="7.9" r="7.461"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="7.984" y1="12.729" x2="7.984" y2="15.072"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="15.072" y1="8.016" x2="12.729" y2="8.016"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="3.272" y1="7.984" x2="0.928" y2="7.984"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="bevel" stroke-miterlimit="10" x1="7.984" y1="0.928" x2="7.984" y2="3.272"/>
<ellipse fill="none" stroke="#1D1D1B" stroke-miterlimit="10" cx="8" cy="8" rx="7.406" ry="7.484"/>
<line fill="#1D1D1B" stroke="#1D1D1B" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="4.133" y1="4.586" x2="7.813" y2="8.203"/>
<line fill="none" stroke="#1D1D1B" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="10.914" y1="6.258" x2="7.984" y2="8.313"/>
</svg>

即使我使用路径，它也显示不清晰：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="HZS_pdf" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0">
    <Canvas x:Name="HZS_pdf_0" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
        <Path x:Name="Path" Width="14.9227" Height="14.9227" Canvas.Left="0.344" Canvas.Top="0.453335" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 15.2667,7.91733C 15.2667,12.0373 11.928,15.376 7.808,15.376C 5.828,15.376 3.93333,14.5893 2.532,13.1933C 1.13067,11.792 0.344,9.896 0.344,7.91733C 0.344,3.79734 3.688,0.453335 7.808,0.453335C 11.928,0.453335 15.2667,3.79734 15.2667,7.91733 Z "/>
        <Path x:Name="Path_1" Width="14.9227" Height="14.9227" Canvas.Left="0.344" Canvas.Top="0.453335" Stretch="Fill" Data="F1 M 15.2667,7.91733C 15.2667,12.0373 11.928,15.376 7.808,15.376C 5.828,15.376 3.93333,14.5893 2.532,13.1933C 1.13067,11.792 0.344,9.896 0.344,7.91733C 0.344,3.79734 3.688,0.453335 7.808,0.453335C 11.928,0.453335 15.2667,3.79734 15.2667,7.91733 Z ">
            <Path.Fill>
                <RadialGradientBrush RadiusX="0.0294518" RadiusY="0.0294518" Center="0.500116,0.500116" GradientOrigin="0.500116,0.500116">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#FF252525" Offset="0.1198"/>
                        <GradientStop Color="#FF909090" Offset="0.4662"/>
                        <GradientStop Color="#FFDBDBDB" Offset="0.7087"/>
                        <GradientStop Color="#FFFFFFFF" Offset="0.8242"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </RadialGradientBrush.GradientStops>
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <RotateTransform CenterX="0.500116" CenterY="0.500116" Angle="180"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                </RadialGradientBrush>
            </Path.Fill>
        </Path>
        <Path x:Name="Line" Width="1.5" Height="3.844" Canvas.Left="7.14067" Canvas.Top="11.9953" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 7.89067,12.7453L 7.89067,15.0893"/>
        <Path x:Name="Line_2" Width="3.844" Height="1.5" Canvas.Left="11.886" Canvas.Top="7.282" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 14.98,8.032L 12.636,8.032"/>
        <Path x:Name="Line_3" Width="3.844" Height="1.5" Canvas.Left="0.0833334" Canvas.Top="7.25" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 3.17733,8L 0.833334,8"/>
        <Path x:Name="Line_4" Width="1.5" Height="3.844" Canvas.Left="7.14067" Canvas.Top="0.192668" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 7.89067,0.942668L 7.89067,3.28667"/>
        <Path x:Name="Path_5" Width="15.8133" Height="15.968" Canvas.Left="2.38419e-007" Canvas.Top="0.0320013" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 15.3133,8.016C 15.3133,12.152 11.9947,15.5 7.90667,15.5C 3.81867,15.5 0.5,12.152 0.5,8.016C 0.5,3.88 3.81867,0.532001 7.90667,0.532001C 11.9947,0.532001 15.3133,3.88 15.3133,8.016 Z "/>
        <Path x:Name="Line_6" Width="5.176" Height="5.11467" Canvas.Left="3.5635" Canvas.Top="4.02067" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 4.3135,4.77067L 7.9895,8.38534"/>
        <Path x:Name="Line_7" Width="4.428" Height="3.552" Canvas.Left="7.14067" Canvas.Top="5.526" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 10.8187,6.276L 7.89067,8.328"/>
    </Canvas>
</Canvas>

制作：

类似的：

<Canvas x:Name="Layer_1" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
    <Ellipse x:Name="Ellipse" Width="17" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.500000" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
</Canvas>

以 250% 大小显示清晰图像的正确方法是什么？

谢谢

【问题讨论】：

即使文字不清晰...
尝试使用几何路径。将矢量图像直接扔到 VS Blender 中，然后复制路径并使用它们来构建图像。
这里的 SVG 标记是什么？如果它只是包装光栅图像的 svg，你会发现 svg 并不神奇。向我们展示图标的 svg 标记和您用来以 250% 大小显示它们的代码，也许我们可以帮助您。 IE。这里需要minimal reproducible example。

标签： c# wpf image svg high-resolution

【解决方案1】：

您的问题是您的 SVG 不是“像素完美”，例如像 y1="12.729" 这样的坐标。 WPF 在决定如何渲染比最初创建的尺寸更小的非像素完美的东西方面确实很糟糕，而放大大部分都没有问题。

通常我所做的是打开 Microsoft Expression Design 并调整图标并确保一切都在整数像素上开始和结束，或者从原始图标的灵感从头开始重新创建它们（这两者都不是最满意的解决方案）。

还有关于您可以查看this 的“不锐化”文本内容。

【讨论】：

Thakns，文字现在很好。但我仍然无法弄清楚如何处理图像。即使我使用。很糟糕

【解决方案2】：

更改系统大小后我必须重新启动。很抱歉打扰您...

【讨论】：