图像上的圆形边界不均匀

本文关键字：边界 不均匀 图像 | 更新日期: 2023-09-27 18:28:27

我正试图为windows phone 8.1 silverlight项目显示一个具有某种颜色的圆形边框的图像，但是当将剪辑应用到它时，图像在边框的边缘重叠，有什么方法可以在图像上实现统一的边框吗？使用以下xaml模板

这是我的xaml

       <Grid Background="Transparent" Width="200" Height="200">
            <Grid.Clip>
                <RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
            </Grid.Clip>
            <Border x:Name="Border1" 
                BorderThickness="4"
                BorderBrush="Red"
                Background="Green"
                CornerRadius="100">
                <Grid Background="Yellow">
                    <ContentPresenter>
                        <Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" 
                               Stretch="UniformToFill">
                        </Image>
                    </ContentPresenter>
                </Grid>
            </Border>
        </Grid>

请检查以下输出图像

https://onedrive.live.com/redir?resid=2F14B4EE5F346B6F%215535

图像上的圆形边界不均匀

我总是倾向于使用Ellipse，所以尝试这样的方法（笔划属性是你想要的圆周围的边界）

    <Ellipse Width="50" Height="50"
             Stroke="LawnGreen"
             StrokeThickness="5">
        <Ellipse.Fill>
            <ImageBrush Stretch="UniformToFill" ImageSource="/Assets/SquareTile71x71.png" />
        </Ellipse.Fill>
    </Ellipse>

我能够通过删除内部边界并添加另一个边界作为内部网格的兄弟来实现它

   <Grid Background="Transparent" Width="200" Height="200">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
        </Grid.Clip>
        <Grid Background="Yellow">
            <ContentPresenter>
                <Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" Stretch="UniformToFill"/>
            </ContentPresenter>
        </Grid>
        <Border x:Name="CircularBorder" BorderThickness="10" BorderBrush="Red" Background="Transparent" CornerRadius="100" IsHitTestVisible="False"/>
    </Grid>
相关文章：