如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的。

本文告诉大家,如何让画出的线不模糊

画出线的第一个方法,创建一个 Canvas ,添加一个线

界面代码

            <Canvas x:Name="Canvas"></Canvas>

在后台添加一条线

            Line myLine = new Line();

            myLine.Stroke = System.Windows.Media.Brushes.Black;

            myLine.X1 = 100;
myLine.X2 = 200; // 150 too far
myLine.Y1 = 200;
myLine.Y2 = 200; myLine.StrokeThickness = 1; Canvas.Children.Add(myLine);

那么如何看到线模糊呢?

简单方法是使用 ViewBox 和放大镜,可以看到模糊

在界面添加下面代码

    <Viewbox >
<Canvas x:Name="Canvas"></Canvas>
</Viewbox>

这时拖动窗口可以看到线放大

可以看到线是模糊的,如果想要让线不模糊,可以添加下面的代码

        myLine.SnapsToDevicePixels = true;
myLine.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);

这个方法是从 [https://stackoverflow.com/q/2879033/6116637][https://stackoverflow.com/q/2879033/6116637]得到,但是无法对于自己的控件

如果自己创建一个控件,那么直接使用 dc.DrawLine 得到不是清晰的

创建一个类自定义控件,添加下面的代码画出线

        protected override void OnRender(DrawingContext dc)
{ dc.DrawLine(_pen, new Point(10, 10), new Point(310, 10)); }

可以看到,画出来的线是模糊的,于是看了微软的代码

看了他的矩形是如何画的,看到他画出来的是清晰的,但是复制他的代码到我的控件,画出来不是清晰的

        /// <summary>
/// Render callback.
/// </summary>
protected override void OnRender(DrawingContext drawingContext)
{
Pen pen = GetPen();
drawingContext.DrawRoundedRectangle(Fill, pen, _rect, RadiusX, RadiusY);
}

下面代码是我复制他的,但是自己的控件画出来在放大时,线模糊,所以直接复制是无法做到wr的矩形那样

       protected override void OnRender(DrawingContext dc)
{ dc.DrawRoundedRectangle(null, _pen, new Rect(new Point(10, 10), new Size(100, 100)), 5, 5);
}

在界面画出来wr 的矩形和自定义控件,可以看到,微软的是清晰的

那么是不是wr 做了特殊的东西,到现在还不知道,但是找到了一个方法,可以画出清晰

缩小看到的图片是这样

那么放大时就是下面这张图

所以需要在放大时,也画一个像素,

这个方法就是本文,所以这是在翻译,只是没有使用对所有的文字翻译,来自工藤大神的方法。

本文使用的方法很简单,第一步

复制方法到一个静态类

    public static void DrawSnappedLinesBetweenPoints(this DrawingContext dc,
Pen pen, double lineThickness, params Point[] points)
{
var guidelineSet = new GuidelineSet();
foreach (var point in points)
{
guidelineSet.GuidelinesX.Add(point.X);
guidelineSet.GuidelinesY.Add(point.Y);
}
var half = lineThickness / 2;
points = points.Select(p => new Point(p.X + half, p.Y + half)).ToArray();
dc.PushGuidelineSet(guidelineSet);
for (var i = 0; i < points.Length - 1; i = i + 2)
{
dc.DrawLine(pen, points[i], points[i + 1]);
}
dc.Pop();
}

然后就可以在自定义控件使用下面的代码

      protected override void OnRender(DrawingContext dc)
{
dc.DrawSnappedLinesBetweenPoints(_pen,1, new[]
{
new Point(10, 10),
new Point(310, 10),
});
}

可以看到线是清晰的

参见:https://stackoverflow.com/a/45189552/6116637

http://www.nbdtech.com/Blog/archive/2008/11/20/blurred-images-in-wpf.aspx


本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

WPF 如何画出1像素的线的更多相关文章

  1. IOS上怎样画出1像素的线

    #define SINGLE_LINE_WIDTH (/[UIScreen mainScreen].scale) #define SINGLE_LINE_ADJUST_OFFSET ((/[UIScr ...

  2. WPF在圆上画出刻度线

    思路 我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果 我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽 ...

  3. 【IOS开发】如何画1像素的线

    最近在项目中画了一根1像素的线,我是通过直接花一个但是通过PS查看,画了不止1个像素. 原代码语句: label1 = [[UILabel alloc] initWithFrame:CGRectMak ...

  4. iOS: 如何正确的绘制1像素的线

    iOS 绘制1像素的线 一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮 ...

  5. iOS 绘制1像素的线

    一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到P ...

  6. 2019-6-27-WPF-如何给定两个点画出一条波浪线

    title author date CreateTime categories WPF 如何给定两个点画出一条波浪线 lindexi 2019-6-27 10:17:6 +0800 2019-6-26 ...

  7. [示例] Firemonkey 画出 1 点像素的线

    说明:在 Firemonkey 在移动平台 Android & iOS 要直接在 Canvas 画出 1 点像素的线,似乎有点困难,不过利用一点小技巧,还是能达到这个要求的,首先要建立一个 B ...

  8. wpf 在不同DPI下如何在DrawingVisual中画出清晰的图形

    环境Win10 VS2017 .Net Framework4.7.1   本文仅讨论在DrawingVisual中进行的画图.   WPF单位,系统DPI,显示器DPI三者的定义及关系 WPF单位:一 ...

  9. [WPF] 使用 HandyControl 的 CirclePanel 画出表盘刻度

    1. 前言 最近需要一个 WPF 的表盘控件,之前 Cyril-hcj 写过一篇不错的博客 <WPF在圆上画出刻度线>,里面介绍了一些原理及详细实现的代码: double radius = ...

随机推荐

  1. Beta阶段冲刺日志集合贴

    [Beta]Daily Scrum Meeting--Day1:http://www.cnblogs.com/RunningGuys/p/6890738.html [Beta]Daily Scrum ...

  2. 201521123111《Java程序设计》第5周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 1.代码阅读:Child压缩包内源代码 ...

  3. 201521123031《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...

  4. 201521123013 《Java程序设计》第3周学习总结

    1. 本章学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  5. 201521123005 《Java程序设计》第1周学习总结

    1. 本章学习总结 了解JDK/JRE/JVM,学会了如何安装JDK 学会使用控制台和eclipse上运行java代码 了解PTA提交的常见套路 http://www.cnblogs.com/zhrb ...

  6. java课程设计--WeTalk(201521123072秦贞一)

    在线群聊系统 1,团队课程设计博客链接 http://www.cnblogs.com/slickghost/p/7018105.html 个人负责模块或任务说明 负责模块:界面设计与实现 2,自己的代 ...

  7. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...

  8. 使用IntelliJ IDEA查看类的继承关系图形

    最近正好也没什么可忙的,就回过头来鼓捣过去的知识点,到Servlet部分时,以前学习的时候硬是把从上到下的继承关系和接口实现记得乱七八糟. 这次利用了IDEA的diagram,结果一目了然,也是好用到 ...

  9. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  10. Spring MVC 的文件下载

    在看Spring MVC文件下载之前请先看Spring MVC文件上传 地址:http://www.cnblogs.com/dj-blog/p/7535101.html 文件下载比较简单,在超链接中指 ...