首页 > 解决方案 > WPF 路径 - 模糊的圆圈

问题描述

有没有办法在 WPF 中锐化一个圆圈中的像素?我尝试使用 SnapToDevicePixels 和 UseLayoutRounding,但我希望有更好的解决方案。

  <Button HorizontalAlignment="Left" Height="30">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="UseLayoutRounding" Value="True"/>
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="ToolTip" Value="Nazaj na začetno stran"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Grid Background="Transparent">
                                    <Path Name="_path" Data="M9 -15.75A7.875000000000002 7.875000000000002 0 1 1 9 0A7.875000000000002 7.875000000000002 0 0 1 9 -15.75zM9 -16.875A9 9 0 1 1 9 1.125A9 9 0 0 1 
                                              9 -16.875z M13.5 -7.875A0.5625 0.5625 0 0 0 12.9375 -8.4375H6.420375L8.83575 -10.85175A0.5625 0.5625 0 0 0 8.03925 -11.64825L4.66425 -8.27325A0.5625 
                                              0.5625 0 0 0 4.66425 -7.47675L8.03925 -4.10175A0.5625 0.5625 0 1 0 8.83575 -4.89825L6.420375 -7.3125H12.9375A0.5625 0.5625 0 0 0 13.5 -7.875z"
                                              Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1" Stretch="Fill"  Width="25" Height="25" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter TargetName="_path" Property="Fill" Value="Black" />
                                    </Trigger>
                               </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

按钮看起来像这样(即使在这个尺寸上也是模糊的圆圈): 输出按钮 - WPF 路径模糊

标签: c#wpf

解决方案


我不知道你期望用这么小的圆圈获得多清晰的图像。但是,使用小数像素位置或定义奇数尺寸的圆对您的情况没有帮助。

对于您想要的大小的图形,如下所示的内容与您将获得的一样平滑。

<Button HorizontalAlignment="Left" Height="30" Width="30" >
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="UseLayoutRounding" Value="True"/>
            <Setter Property="ToolTip" Value="Nazaj na začetno stran"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse x:Name="border" Stroke="Black" StrokeThickness="2" Width="24" Height="24" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            <Path Width="12" Height="12" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="Black" StrokeThickness="2" Data="M 1,2 L 0,1 L 1,0 M 0,1 L 2,1" Stretch="Fill" />
                        </Grid>
                            
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="border" Property="Fill" Value="DarkOrange" />
                             </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

生成以下内容(放大 10 倍)

在此处输入图像描述


相比之下,这是一个 24 像素宽,2 像素笔宽,用paint.net 绘制的圆圈(再次放大 10 倍)

在此处输入图像描述


推荐阅读