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

时间:2017-01-14 13:59:20

标签: c# wpf image svg high-resolution

我正在尝试将所有图标更改为某种矢量图像,以便以更高的尺寸显示文本,应用程序和其他项目"。

Change size

我尝试了svg图像格式,但它看起来并不敏锐。 (我试过很多图书馆,最好的是sharpvector)。

夏普图片:

Sharp images

尺寸为250%时取消锐化图像:

enter image description here

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

enter image description here

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>

使:

enter image description here

类似:

<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>

enter image description here

以250%的尺寸显示清晰图像的正确方法是什么?

谢谢

2 个答案:

答案 0 :(得分:0)

您的问题是您的SVG不是像素完美&#34;,例如像$list=array(); $month = @$_POST['month']; $year = @$_POST['year']; $show = @$_POST['show']; for($d=1; $d<=31; $d++) { $time=mktime(12, 0, 0, $month, $d, $year); if (date('m', $time)==$month) $list[]=date('d-M-Y, D', $time); } foreach ($list as $day) { $query = mysql_query("SELECT * FROM tb_attendance WHERE tb_attendance.employee_number = '$employee_number' GROUP BY badge_number, date_in") or die (mysql_error()); while ($data = mysql_fetch_array($query)) { ?> <tr> <td> <?php echo $day; ?> </td> <?php if (date('d/m/Y', strtotime($day)) == $data['date_in']) { ?> <td> <?php echo $data['employee_number']; ?> </td> <td> <?php echo $data['badge_number']; ?> </td> <td> <?php echo $data['employee_name']; ?> </td> <td> <?php echo $data['time_in']; ?> </td> <td> <?php echo $data['time_out']; ?> </td> <?php } elseif (date('d/m/Y', strtotime($day)) != $data['date_in']) { ?> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <?php }}} ?> 这样的坐标。 WPF在决定如何渲染小于最初创建的非像素完美填充物时非常糟糕,而扩展主要是没有问题。

通常我做的是打开Microsoft Expression Design并调整图标并确保所有内容都以整数像素开始和结束,或者从原始图标灵感重新创建它们(这两者都不是最令人满意的解决方案)。

关于&#34;不清晰&#34;您可以查看this的文字内容。

答案 1 :(得分:0)

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