解决WPF绘制矢量图形模糊的问题

WPF默认提供了抗锯齿功能，通过向外扩展的半透明边缘来实现模糊化。由于WPF采用了设备无关单位，当设备DPI大于系统DPI时，可能会产生像素自动扩展问题，这就导致线条自动向外扩展一个像素，并且与边缘相邻的线条颜色变成了半透明，如下图所示:

这种特性在绘制细线条的时候会导致一些我们所不期望的结果：颜色变淡，线条模糊，线条变粗。很多时候，我们是无法绘制一个像素的清晰的线条的。对于这个问题，WPF给我们提供了几种解决方案：

1、设置像素对齐

对于系统内置的一些控件，通过设置SnapsToDevicePixels为true，可以非常方便的实现像素对齐。

这个属性是有继承效果的，只要在父控件上设置了，其所有的子控件都是生效的。但它有时会出现改变窗口大小时线条消失的情况

2、设置对齐参考线

方法1只针对系统的内置的一些控件有效，但对于使用DrawingVisual等方式自绘的图形则没有效果。此时可以通过设置参考线解决这一问题。

简单的示例如下：

void render(DrawingContext dc)
{
    var pen = new Pen(Brushes.Black, 1);
    var d = pen.Thickness / 2;

    var guidelines = new GuidelineSet(new []{d}, new[]{d});
    dc.PushGuidelineSet(guidelines);

    dc.DrawLine(pen, new Point(30, 10), new Point(30, 80));
    dc.DrawLine(pen, new Point(50, 20), new Point(50, 80));
}

具体代码参见MSDN：Apply a GuidelineSet to a Drawing，也可以参看这篇文章WPF DrawingContext seems ignore SnapToDevicePixels

3、设置 RenderOptions.EdgeMode="Aliased"

前面的设置参考线方式效果较好，不过需要编写较多的代码，并且只能适用于水平或垂直的线条。很多时候，我使用的是设置 RenderOptions.EdgeMode="Aliased"（如果在代码中则是使用this.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased)）

4、设置UseLayoutRounding="True"

这个是在WPF4后增加的一个选项，用来控制布局舍入的，用来控制图片模糊的效果非常好，用于控制控件的模糊效果也不错的。不过也是对DrawingContext绘制的图形没有效果的。

小结：WPF的抗锯齿效果在给我们带来的很好的视觉效果的同时，也给我们带来的不少困扰，本文就总结了几种常见的解决方案，希望能对大家的工作带来一点帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • c# wpf如何使用Blend工具绘制Control样式

    c# wpf如何使用Blend工具绘制Control样式

    本文通过设计一个RadioButton,分享下使用Blend绘制Path的方法.待绘制的RadioButton样式如下文所示,如有更好的方法实现该样式,欢迎交流. 实现效果 将要实现的RadioButton样式如下图,可以看出按钮的笔尖和笔身的填充色,以及选中时右上方圆形的填充色一致,代表笔的颜色. 实现方式 笔身使用矩形,填充色绑定按钮背景色:笔头部分使用闭合的Path,其中笔尖的颜色同样绑定按钮背景色:右上方的圆形使用Ellipse,填充色同样绑定按钮背景色. 实现步骤 1.打开Blend,

  • WPF基于物理像素绘制图形

    WPF基于物理像素绘制图形

    WPF中有一个DrawingContext类,该类提供了很多画法方法,例如DrawLine,DrawText,DrawRectangle等.开发者使用它们可以方便地进行图形绘制.不过,在使用DrawingContext过程中,我发现使用DawLine方法画出的线条在某些部分有些模糊.这个问题的解决,需要一些计算机图形学方面的知识,使用的方法并不是很复杂.不过,这个方法所涉及到的一些过程有些令人费解(好吧,我没有专门学过计算机图形学),本文是我在实践中的一些尝试和经验的总结. 还是从一个例子开始吧

  • WPF使用DrawingContext实现二维绘图

    DrawingContext比较类似WinForm中的Graphics 类,是基础的绘图对象,用于绘制各种图形,它主要API有如下几种: 绘图API 绘图API一般形为DrawingXXX系列,常用的基础的绘图API有: DrawEllipse DrawGeometry DrawGlyphRun DrawImage DrawRectangle DrawRoundedRectangle 这些和GDI的API是非常相似的,WPF的API中另外还都有一个带动画的版本,不过一般很少用. 另外还有两个相对

  • WPF开发之利用DrawingVisual绘制高性能曲线图

    WPF开发之利用DrawingVisual绘制高性能曲线图

    前言 项目中涉及到了心率检测,而且数据量达到了百万级别,通过WPF实现大数据曲线图时,尝试过最基础的Canvas来实现,但是性能堪忧,而且全部画出来也不实际.同时也尝试过找第三方的开源库,但是因为曲线图涉及到很多细节功能,第三方的肯定也没法满足.没办法,只能自己实现,上网查找后发现DrawingVisual这个玩意可以实现高性能画图,同时再搭配局部显示,这样就能实现自己想要的效果.话不多说,今天把大致的实现思路写一下,就不直接把项目的源码贴出来,写个简单的Demo就好了. 正文 1.首先新建个项

  • WPF使用Geometry绘制几何图形

    WPF使用Geometry绘制几何图形

    在WPF的DrawingContext对象中,提供了基本的绘制椭圆和矩形的API:DrawEllipse和DrawRectangle.但是,这些是远远不够用的,我们在日常应用中,更多的是使用DrawGeometry函数,它可以绘制更多复杂的几何图形,并且提供了许多强大而易用的函数,在大多数场景下,甚至可以取代DrawEllipse和DrawRectangle函数. 在WPF图形体系中,Geometry类表示几何图形的基类,使用的时候是实例化它的一些子类,具体的有: 基本几何图形 线段:LineG

  • WPF如何绘制光滑连续贝塞尔曲线示例代码

    WPF如何绘制光滑连续贝塞尔曲线示例代码

    1.需求 WPF本身没有直接把点集合绘制成曲线的函数.可以通过贝塞尔曲线函数来绘制. 贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的.当然在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等. 贝塞尔曲线类是:BezierSegment,三次贝塞尔曲线,通过两个控制点来控制开始和结束方向. QuadraticBezierSegment,二次贝塞尔,通过一个控制点来控制弯曲方向. 本文使用的是三次. 图片来源维

  • WPF InkCanvas绘制矩形和椭圆

    WPF InkCanvas绘制矩形和椭圆

    前面说到了InkCanvas的基本操作,这里用一个实例来说明具体应用:绘制矩形和椭圆. 效果图 xaml代码 <Window x:Class="WPF_InkCanvas.ROI_InkCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  • WPF实现雷达扫描图的绘制详解

    WPF实现雷达扫描图的绘制详解

    目录 前言 制作思路 具体实现 前言 实现一个雷达扫描图. 源代码在TK_King/雷达 (gitee.com),自行下载就好了 制作思路 绘制圆形(或者称之轮) 绘制分割线 绘制扫描范围 添加扫描点 具体实现 首先我们使用自定义的控件.你可以使用vs自动添加,也可以手动创建类.注意手动创建时要创建Themes/Generic.xaml的文件路径哦. 控件继承自itemscontrol,取名叫做Radar. 我们第一步思考如何实现圆形或者轮,特别是等距的轮. 我们可以使用简单的itemscont

  • 解决WPF绘制矢量图形模糊的问题

    解决WPF绘制矢量图形模糊的问题

    WPF默认提供了抗锯齿功能,通过向外扩展的半透明边缘来实现模糊化.由于WPF采用了设备无关单位,当设备DPI大于系统DPI时,可能会产生像素自动扩展问题,这就导致线条自动向外扩展一个像素,并且与边缘相邻的线条颜色变成了半透明,如下图所示: 这种特性在绘制细线条的时候会导致一些我们所不期望的结果:颜色变淡,线条模糊,线条变粗.很多时候,我们是无法绘制一个像素的清晰的线条的.对于这个问题,WPF给我们提供了几种解决方案: 1.设置像素对齐 对于系统内置的一些控件,通过设置SnapsToDeviceP

  • 面试中canvas绘制图片模糊图片问题处理

    面试中canvas绘制图片模糊图片问题处理

    目录 问题:canvas绘制图片,图片变模糊 那么如何去处理这样的问题呢? 要点:两个点 解决方案 方法一 方法二 方法三 问题:canvas绘制图片,图片变模糊 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况.我拿下面一张图片画到canvas上作为例子,看上去应该比较明显的有模糊的感觉. 单方面的去修改图片精度,换成更高清的图片,事实证明确实有一丢丢用,但是效果不是很明显.况且我当时那个图片由于是手绘的

  • 解决WPF中空域问题(Airspace issuse)

    空域问题是由于Winform与WPF在底层渲染机制上有所区别而导致的.多数情况下,开发者为了实现不规则的窗体并承载Winform控件时,遇到此类问题.当WPF窗体设置为允许透明(也就是AllowsTransparency=True)时,Winform Control 会出现不显示等情况,为了避免此问题,许多UI框架在实现不规则窗体时,用Win32 API 去实现不规则窗体的一些特效,比如透明,圆角等,这样WPF窗口的AllowsTransparency属性就可以设为FALSE,从而绕过了空域问题

  • Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Ex

  • python 解决cv2绘制中文乱码问题

    因为使用cv2.putText() 只能显示英文字符,中文会出现乱码问题, 因此使用PIL在图片上绘制添加中文,可以指定字体文件. 大体思路: OpenCV图片格式转换成PIL的图片格式: 使用PIL绘制文字: PIL图片格式转换成OpenCV的图片格式: 具体实现: # coding=utf-8 # cv2解决绘制中文乱码 import cv2 import numpy from PIL import Image, ImageDraw, ImageFont def cv2ImgAddText(

  • 解决MySQL数据库中文模糊检索问题的方法

    在 MySQL下,在进行中文模糊检索时,经常会返回一些与之不相关的记录,如查找 "%a%" 时,返回的可能有中文字符,却没有a字符存在.本人以前也曾遇到过类似问题,经详细阅读MySQL的Manual,发现可以有一种方法很方便的解决并得到满意的结果. 希望通过"标题"对新闻库进行检索,关键字可能包含是中英文,如下SQL语句: 以下为引用的内容: Code: select id,title,name from achech_com.news where title li

  • JS中使用cavas截图网页并解决跨域及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip

  • 解决一个pandas执行模糊查询sql的坑

    查询引擎使用了presto,在sql中使用了模糊查询. engine = create_engine(presto_url,encoding='utf-8') sql_exe ="""select id,title,tags from source.base.table where tags like '%呵呵%' """ df = pd.read_sql_query(sql_exe,engine) 一直报错: unsupported forma

  • 解决WPF附加属性的Set函数不调用的问题

    今天写程序的时候用到了附加属性,我是用VS内置的propa的代码段来实现的,代码如下: class Attach { public static bool GetIsEnabled(DependencyObject obj) { return (bool)obj.GetValue(IsEnabledProperty); } public static void SetIsEnabled(DependencyObject obj, bool value) { obj.SetValue(IsEnab

  • WPF中button按钮同时点击多次触发click解决方法

    解决WPF中button按钮同时点击多次触发click的方法,供大家参考,具体内容如下 DateTime lastClick = DateTime.Now; object obj = new object(); int i = 0; private void Button_Click(object sender, RoutedEventArgs e) { this.IsEnabled = false; var t = (DateTime.Now - lastClick).TotalMillise

随机推荐