WPF 使用 Direct2D1 画图 绘制基本图形

本文来告诉大家如何在 Direct2D1 绘制基本图形,包括线段、矩形、椭圆

本文是一个系列

本文的组织参考Direct2D,对大神表示感谢。

在开始前先告诉大家为何需要使用 Direct2D ,虽然 WPF 也是基于 DX 进行渲染,但是 WPF 做了很多兼容处理,所以没有比直接使用 Direct2D 的性能高。经过测试,在使用下面的所有代码,占用 CPU 几乎都是 0% ,因为没有布局、透明和事件处理,所以速度是很快。

在 Direct2D 使用的 点是 Point2F ,传入的是两个 float ,和 Point 差不多。

Point2F 也是一个结构体,所以和 Point 类型差不多

线段

线段需要使用 DrawLine ,方法的签名

    public void DrawLine(Point2F firstPoint 起始点 , Point2F secondPoint 终点, Brush brush 笔刷, float strokeWidth 线段宽度)

 public unsafe void DrawLine(Point2F firstPoint, Point2F secondPoint, Brush brush, float strokeWidth, StrokeStyle strokeStyle 线段样式)

所以使用下面的方法就可以在 (10,10) (100,10) 画出一条宽度为 2 的红线

            _renderTarget.DrawLine(new D2D.Point2F(10, 10), new D2D.Point2F(100, 10),
                _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)), 2);

上面的代码运行在WPF 使用 Direct2D1 画图入门文章的 OnRendering 方法,为了让大家也可以试试下面的代码,建议大家先去看这篇博客。

关于笔刷会在后面说

StrokeStyle

可以看到上面线段的最后一个参数是 StrokeStyle 那么这个参数是如何创建?在 Direct2D 有很多类都不能直接直接创建需要使用 D2DFactory 或 RenderTarget 才能创建。StrokeStyle 就需要使用 D2DFactory 进行创建。

创建 StrokeStyle 需要参数 StrokeStyleProperties,这个类的构造有两个重载,一个是不需要参数,另一个是需要很多参数。代码请看下面。

public StrokeStyleProperties(CapStyle startCap, CapStyle endCap, CapStyle dashCap, LineJoin lineJoin, float miterLimit, DashStyle dashStyle, float dashOffset)

从代码的命名大概大家也可以知道 StrokeStyleProperties 参数的意思,下面先创建一个没有构造函数的来创建 StrokeStyle ,请看下面代码

            var strokeStyleProperties = new D2D.StrokeStyleProperties();

            var strokeStyle = d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10,10),new D2D.Point2F(100,10), _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)),2, strokeStyle);

            _renderTarget.EndDraw();

需要注意,创建 strokeStyle 的工厂需要和创建 RenderTarget 一样,如果使用不一样的工厂就会出现下面异常。

Microsoft.WindowsAPICodePack.DirectX.Direct2D1.Direct2DException:“EndDraw has failed with error: 一起使用的对象必须创建自相同的工厂实例。 (异常来自 HRESULT:0x88990012) Tags=(0,0).”

所以需要修改WPF 使用 Direct2D1 画图入门文章的代码,把 D2DFactory 写为字段

   public MainWindow()
        {
            InitializeComponent();

            CompositionTarget.Rendering += OnRendering;

            Loaded += (s, e) =>
            {
                var d2DFactory = D2D.D2DFactory.CreateFactory(D2D.D2DFactoryType.Multithreaded);

                var windowHandle = new WindowInteropHelper(this).Handle;
                var renderTarget = d2DFactory.CreateHwndRenderTarget(new D2D.RenderTargetProperties(),
                    new D2D.HwndRenderTargetProperties(windowHandle,
                        new D2D.SizeU((uint) ActualWidth, (uint) ActualHeight),
                        D2D.PresentOptions.RetainContents));

                _redBrush = renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1));

                _greenBrush = renderTarget.CreateSolidColorBrush(new D2D.ColorF(0, 1, 0, 1));

                _blueBrush = renderTarget.CreateSolidColorBrush(new D2D.ColorF(0, 0, 1, 1));

                _renderTarget = renderTarget;

                _d2DFactory = d2DFactory;
            };
        }

StrokeStyleProperties

关于 StrokeStyleProperties 需要说一下,就是各个参数。

从名字可以看到 StartCap 和 EndCap 就是线段的两端的图形,可以选的参数

  • Flat
  • Square
  • Round
  • Triangle

具体表示是什么,我会使用下面的例子

Flat

平的

            var strokeStyleProperties = new D2D.StrokeStyleProperties();

            strokeStyleProperties.StartCap = D2D.CapStyle.Flat;
            strokeStyleProperties.EndCap = D2D.CapStyle.Flat;

            var strokeStyle = _d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10,10),new D2D.Point2F(100,10), _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)),2, strokeStyle);

            _renderTarget.EndDraw();

Round

圆的

       float h = 10;

            strokeStyleProperties.StartCap = D2D.CapStyle.Round;
            strokeStyleProperties.EndCap = D2D.CapStyle.Round;
            strokeStyle = _d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            h += 20;

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10, h), new D2D.Point2F(100, h), _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)), 5, strokeStyle);

            _renderTarget.EndDraw();

Square

方形

  strokeStyleProperties.StartCap = D2D.CapStyle.Square;
            strokeStyleProperties.EndCap = D2D.CapStyle.Square;
            strokeStyle = _d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            h += 20;

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10, h), new D2D.Point2F(100, h), _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)), 5, strokeStyle);

            _renderTarget.EndDraw();

Triangle

三角形

            strokeStyleProperties.StartCap = D2D.CapStyle.Triangle;
            strokeStyleProperties.EndCap = D2D.CapStyle.Triangle;
            strokeStyle = _d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            h += 20;

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10, h), new D2D.Point2F(100, h), _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)), 5, strokeStyle);

            _renderTarget.EndDraw();

DashStyle

如果需要画虚线就可以使用 DashStyle ,虚线显示就是使用 CapStyle

            strokeStyleProperties.DashStyle = D2D.DashStyle.DashDot;
            strokeStyleProperties.DashCap = D2D.CapStyle.Square;
            strokeStyleProperties.DashOffset = 2;

            h += 20;

            strokeStyle = _d2DFactory.CreateStrokeStyle(strokeStyleProperties);

            _renderTarget.BeginDraw();

            _renderTarget.DrawLine(new D2D.Point2F(10, h), new D2D.Point2F(100, h),
                _renderTarget.CreateSolidColorBrush(new D2D.ColorF(1, 0, 0, 1)), 5, strokeStyle);

            _renderTarget.EndDraw();

大家自己试一试就知道

里面还有属性 LineJoin 这个不是线段可以做的,是折线才可以使用,表示两个线段如何链接

矩形

画矩形使用 DrawRectangle ,参数需要传入 RectF 需要传入上下左右的浮点数。

            _renderTarget.DrawRectangle(new D2D.RectF(10, 10, 100, 100), brush, 10);

矩形有两个重载

    public void DrawRectangle(RectF rect, Brush brush, float strokeWidth)
    public unsafe void DrawRectangle(RectF rect, Brush brush, float strokeWidth, StrokeStyle strokeStyle)

矩形的 StrokeStyle 和线段一样。

椭圆

实际上画圆和椭圆是一样的,画圆的函数有两个重载

    public void DrawEllipse(Ellipse ellipse, Brush brush, float strokeWidth)
 public unsafe void DrawEllipse(Ellipse ellipse, Brush brush, float strokeWidth, StrokeStyle strokeStyle)

需要先创建 Ellipse 和笔刷。

创建 Ellipse 需要给圆心和两个轴,下面创建一个圆心在 (100,100) ,两个轴都是50的椭圆。实际上就是半径是50的圆形。

            var ellipse = new D2D.Ellipse(new D2D.Point2F(100, 100), 50, 50);

这就是绘制基本的图形。

那么如何填充图形?实际上所有 Draw 都有对应的 Fill 函数,除了线段。所以填充就是调用对应的 Fill 函数。

尝试运行程序,看看这时的 CPU ,实际上是几乎不会动,因为所有的计算都在 GPU 计算。不过程序里的代码包括创建图形,实际上是在 CPU 创建,但是因为速度很快,几乎不需要计算,所以需要的时间很短。

文字

最后就是告诉大家如何绘制文字。

绘制文字需要使用 DirectWrite ,需要先创建 DWriteFactory 然后才可以绘制文本。

绘制文本有多个方式,因为需要的很多参数都不能直接创建需要使用 DWriteFactory 创建,所以这里需要先使用下面代码

            var dWriteFactory = DWriteFactory.CreateFactory();

创建文字有多个方法

public void DrawText(string text, TextFormat textFormat, RectF layoutRect, Brush defaultForegroundBrush)

public void DrawText(string text, TextFormat textFormat, RectF layoutRect, Brush defaultForegroundBrush, MeasuringMode measuringMode)

public void DrawText(string text, TextFormat textFormat, RectF layoutRect, Brush defaultForegroundBrush, DrawTextOptions options)

public unsafe void DrawText(string text, TextFormat textFormat, RectF layoutRect, Brush defaultForegroundBrush, DrawTextOptions options, MeasuringMode measuringMode)


 public unsafe void DrawTextLayout(Point2F origin, TextLayout textLayout, Brush defaultForegroundBrush)

 public unsafe void DrawTextLayout(Point2F origin, TextLayout textLayout, Brush defaultForegroundBrush, DrawTextOptions options)

因为有很多个参数,需要大家自己去试试

下面来写出简单文字

需要先创建 textFormat 需要告诉使用哪个字形,和字体大小

            var textFormat = dWriteFactory.CreateTextFormat("宋体", 20);

下面就是画出文字,文字换行可以使用\n,复杂的换行请使用文字重载方法,这里我就不说了

            _renderTarget.BeginDraw();

            _renderTarget.DrawText("lindexi 本文所有博客放在 lindexi.oschina.io \n欢迎大家来访问\n\n这是系列博客,告诉大家如何在 WPF 使用Direct2D1", textFormat, new D2D.RectF(10, 10, 1000, 1000), brush);

            _renderTarget.EndDraw();

需要说的是 Windows API Code Pack 1.1 已经很久没更新,而且有错误,所以建议使用 SharpDX

参见:Using Direct2D with WPF - CodeProject

https://jeremiahmorrill.wordpress.com/2011/02/14/a-critical-deep-dive-into-the-wpf-rendering-system/


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小灰灰

cocos2dx-v3.4 2048(四):游戏逻辑的设计与实现

前言 ---- 2048的游戏逻辑比较简单,向四个方向移动单元格,若相邻的单元格数字相同,则合并成一个新的单元格,且数字为之前的两倍;若不同,则移动到目的方向上...

41860
来自专栏菩提树下的杨过

sliverlight:按点击移动的连续跑马灯

演示效果如下: 鼠标点击一次,所有方块向左移动一格 ? 思路: 1.利用StoryBoard产生移动,每次点击时,该动画播放一次(即移动一格) 2.关键:动画播...

21460
来自专栏小筱月

分享:Java 开发精美艺术二维码

看到网络上各种各样的二维码层出不穷,好像很炫酷的样子,一时兴起,我也要制作这种炫酷二维码效果

17130
来自专栏我的博客

Jquery学习第一天

1、jQuery优点 轻量级,强大的选择器,出色的DOM操作,可靠的事件处理,完善的Ajax,不污染的顶级变量,出色的浏览器兼容,链式操作,隐式迭代,行为层和结...

37780
来自专栏章鱼的慢慢技术路

Go指南练习_切片

19030
来自专栏阿凯的Excel

自定义单元格格式介绍(第二期 文本版)

上期和大家分享了自定义条件格式的数字版。本期继续和大家分享文本的自定义单元格格式! 继续强调啰嗦两件事情!!! 1、自定义单元格格式只改变显示内容,不改变实...

29860
来自专栏林德熙的博客

win10 uwp 分治法

算法涉及到了一个平面几何的知识。就是三角形p1p2p3的面积等于以下行列式的二分之一: % <![CDATA[ \begin{array}{cccc} | ...

8810
来自专栏AhDung

【C#】无损转换Image为Icon

此法的问题是,如果图像是透明背景,那么得到的Icon的边缘就是毛糙的,像是先垫了一层背景色然后再去色的效果,很不如人意,用过的朋友都知道。尚未研究是bmp.Ge...

13430
来自专栏Java 源码分析

markdown语法

Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 ...

31240
来自专栏数据科学学习手札

(数据科学学习手札42)folium进阶内容介绍

  在上一篇(数据科学学习手札41)中我们了解了folium的基础内容,实际上folium在地理信息可视化上的真正过人之处在于其绘制图像的高度可定制化上,本文就...

33740

扫码关注云+社区

领取腾讯云代金券