文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

WPF基于物理像素怎么绘制图形

2023-07-02 12:57

关注

本文小编为大家详细介绍“WPF基于物理像素怎么绘制图形”,内容详细,步骤清晰,细节处理妥当,希望这篇“WPF基于物理像素怎么绘制图形”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

从一个例子:
从FrameworkElement继承一个MyRectangleElement,然后重写OnRender方法如下:

protected override void OnRender(DrawingContext drawingContext){    Pen pen = new Pen(Brushes.Black, 1);    Rect rect = new Rect(20,20, 50, 60);     drawingContext.DrawRectangle(null, pen, rect);}

然后在Window上呈现MyRectangleElement,效果(右下角有放大镜)如下:

WPF基于物理像素怎么绘制图形

通过放大图形,能够很清晰地看到线条是不均匀的,在宏观视觉效果上感觉模糊,看上去很不舒服。于是,两个问题就产生了:

怎么办?MSDN,百度,Google一起上!皇天不负苦心人,现在,谜底来到了我们的面前:

1、为什么会出现这样的效果呢?

WPF呈现引擎的反锯齿系统将那些没有在物理像素系统上的线扩展到了多个像素上。这里涉及到以下三个概念:

声明:以上三个概念的解释是根据我个人的理解,不一定准确、严谨。如果您发现什么不对的地方,还望不吝指正。
为了更好地帮助您理解这个过程,这里给出一个示意图来解释一下:

WPF基于物理像素怎么绘制图形

上图中的淡蓝色网格可以视为“物理像素系统”,深色的图案是您画出的线条。可以很明显地看出,这条线的四条边都不在“物理像素系统”上,因此,“反锯齿系统”会将此线条的四条边扩展到相应的“物理像素系统”上。于是,本文最开始的情景便出现了。

2、如何解决这个问题?

针对不同的问题上下文,WPF给出了与之相应的解决方案。据我所知,有如下几个:

对于从UIElement继承的类型,比如Control,通过将SnapsToDevicePixels设置为true可以得到清晰的图像,该属性的默认值为false。FrameworkElement从UIElement继承的时候,给这个属性赋予了一个Inherited元数据。如此一来,只要您在FrameworkElement Tree的根结点上将此属性设置为true,那么整个FrameworkElement Tree的绘制都将变得清晰起来。

SnapsToDevicePixels属性对于WPF Control来说是有用的,但是对本文的问题无能为力,于是,嗯,GuidelineSet横空出世!对于这个类,MSDN只是给出了一个用法的示例,从这个例子中我只能看到GuidelineSet可以这么用,但为什么是这样用就没有答案了。而且,有点离谱、神奇的是:MSDN上关于这点上一个示意图内容上有错。如下图所示:

WPF基于物理像素怎么绘制图形

图下部的左黑框是用了GuidelineSet后出现的结果,右边才是没有使用的结果。这两个图的位置应该互换一下。

我们必须回答这个问题:如果在(x1,y1) (x2,y2)处画一条线该如何在DrawingContext上使用GuidelineSet,以保证画法是清晰的呢?

这个问题让我着实纳闷了许久(原因本文第一段已经交代),不过,经过不断地尝试和思考,最终我找到了答案:
Guideline其实是图形设备在呈现时用来把逻辑像素点对齐到物理像素点的参考量。 使用它告诉图形设备你希望哪些逻辑像素点被对齐到物理像素点上。

声明:以上概念的解释是根据我个人的理解,不一定准确、严谨。如果您发现什么不对的地方,还望不吝指正。

下面,我将使用一个简单的示例来演示如何使用GuidelineSet,以及它所带来的效果。在这个示例中,我们使用DrawingContext的DrawLine方法绘制一个10×10的网格,相关代码如下:
首先,定义画法所用到的常量

    internal static class DrawingConstants    {        public static readonly int Rows = 10;        public static readonly int Columms = 10;        public static readonly double PenThickness = 1.0;        public static readonly double HalfOfPenThickness = PenThickness/2;    }

然后,定义NormalDrawingElement(使用一般画法):

    class NormalDrawingElement : FrameworkElement    {        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)        {            base.OnRender(drawingContext);            double xOffset = Math.Floor(this.RenderSize.Width / DrawingConstants.Columms);            double yOffset = Math.Floor(this.RenderSize.Height / DrawingConstants.Rows);            double xLineWidth = Math.Floor(this.RenderSize.Width);            double yLineHeight = Math.Floor(this.RenderSize.Height);            DrawingContext dct = drawingContext;            Pen blackPen = new Pen(Brushes.Black, DrawingConstants.PenThickness);            blackPen.Freeze();            //Draw the horizontal lines              Point x = new Point(0, 0);            Point y = new Point(xLineWidth, 0);            for (int i = 0; i <= DrawingConstants.Rows; i++)            {                dct.DrawLine(blackPen, x, y);                x.Offset(0, yOffset);                y.Offset(0, yOffset);            }            //Draw the vertical lines              x = new Point(0, 0);            y = new Point(0, yLineHeight);            for (int i = 0; i <= DrawingConstants.Columms; i++)            {                dct.DrawLine(blackPen, x, y);                x.Offset(xOffset, 0);                y.Offset(xOffset, 0);            }        }    }

定义GuidelineSetDrawingElement(使用GuidelineSet):

    class GuidelineSetDrawingElement : FrameworkElement    {        protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)        {            base.OnRender(drawingContext);            double xOffset = Math.Floor(this.RenderSize.Width / DrawingConstants.Columms);            double yOffset = Math.Floor(this.RenderSize.Height / DrawingConstants.Rows);            double xLineWidth = Math.Floor(this.RenderSize.Width);            double yLineHeight = Math.Floor(this.RenderSize.Height);            DrawingContext dct = drawingContext;            Pen blackPen = new Pen(Brushes.Black, DrawingConstants.PenThickness);            blackPen.Freeze();            //Draw the horizontal lines              Point x = new Point(0, 0);            Point y = new Point(xLineWidth, 0);            for (int i = 0; i <= DrawingConstants.Rows; i++)            {                dct.PushGuidelineSet(new GuidelineSet(null, new double[] { y.Y - DrawingConstants.HalfOfPenThickness, y.Y + DrawingConstants.HalfOfPenThickness}));                dct.DrawLine(blackPen, x, y);                dct.Pop();                x.Offset(0, yOffset);                y.Offset(0, yOffset);            }            //Draw the vertical lines              x = new Point(0, 0);            y = new Point(0, yLineHeight);            for (int i = 0; i <= DrawingConstants.Columms; i++)            {                dct.PushGuidelineSet(new GuidelineSet(new double[] { x.X + DrawingConstants.HalfOfPenThickness, x.X - DrawingConstants.HalfOfPenThickness}, null));                dct.DrawLine(blackPen, x, y);                dct.Pop();                x.Offset(xOffset, 0);                y.Offset(xOffset, 0);            }        }    }

这个画法和上一个画法的区别仅仅在于以下两点:

最后,我们将这两个Element呈现出来:

<Window x:Class="GuidelineSetDemo.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:loc="clr-namespace:GuideLineSetDemo"        Title="MainWindow" Height="350" Width="525">    <Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*" />            <ColumnDefinition Width="*" />        </Grid.ColumnDefinitions>        <Grid Grid.Column="0">            <Grid.RowDefinitions>                <RowDefinition Height="Auto"/>                <RowDefinition Height="*"/>            </Grid.RowDefinitions>            <TextBlock Text="Normal Drawing" Margin="3" HorizontalAlignment="Center"/>            <loc:NormalDrawingElement Margin="10" Grid.Row="1"/>        </Grid>        <Grid Grid.Column="1">            <Grid.RowDefinitions>                <RowDefinition Height="Auto"/>                <RowDefinition Height="*"/>            </Grid.RowDefinitions>            <TextBlock Text="Dawing with GuidelineSet" Margin="3" HorizontalAlignment="Center"/>            <loc:GuidelineSetDrawingElement Margin="10" Grid.Row="1"/>        </Grid>    </Grid></Window>

运行后的效果如下:

WPF基于物理像素怎么绘制图形

另外,使用GuidelineSet的时候需要注意以下几个细节:

读到这里,这篇“WPF基于物理像素怎么绘制图形”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯