Direct2D 是微软新的二维图形 API,可为二维几何图形、位图和文本提供高性能和高质量的呈现。Direct2D 支持硬件加速,无论是绘制速度还是绘制质量,Direct2D 都要比 GDI 和 GDI+ 好很多,不过系统要求 Windows 7 或 Windows Vista SP2 以上。

关于 Direct2D 的一些介绍可以参见微软的帮助《关于 Direct2D》。

Direct2D 内置了很多特效(Effects),包括高斯模糊(Gaussian Blur)、颜色转换(Color Matrix)、阴影(Shadow)等,所有特效的列表可以在这里(英文)看到。利用这些特效可以做出很多效果,组合起来的话,完全可以实现 PhotoShop 中滤镜的功能。

本篇文章就介绍了如何通过组合多种特效,来实现斜角(Bevel)效果。具体的实现使用的是 SharpDX 类库,因为它支持 Direct2D 的内置特效,而微软自己的 WindowsAPICodePackage 至少在 1.1 版还没有支持。SharpDX 使用的是目前最新的开发版 2.5.0,它自带了支持 DirectX 11 和 DirectX 11.1 的两组 DLL,其中前一组 DLL 不支持 Effects,因此要使用支持 DirectX 11.1 的 DLL 才可以。

斜角特效的主要原理来自于 How to Apply Effects to Primitives,这是一篇官方帮助文档,它自带的示例是 C++ 的,而且系统要求是 Windows 8.1 Preview + Microsoft Visual Studio 2013 Preview,因此我将其中核心的部分提取出来,自己编写了一个示例,实现的效果如图 1 所示。

图 1 源位图及其斜角效果对比

斜角效果的实现过程如图 2 所示,利用四个特效进行组合,就可以实现一个比较不错的斜角特效。

图 2 效果实现流程及效果

首先将要应用斜角的图像绘制(或者从外界加载)到一个 SharpDX.Direct2D1.Bitmap1 对象中。示例中的图形是利用 Direct2D 的相关方法绘制的,实际使用中也可以从外界加载。需要注意的是背景必须是透明的,不透明的部分就会产生斜角,否则只会在图片的边缘产生斜角。这个位图被称为“源位图”。

然后为源位图添加一个 SharpDX.Direct2D1.Effects.GaussianBlur 特效,高斯模糊的半径(StandardDeviation 属性)就决定了斜角的尺寸。如图 3 所示,上图的半径是 8,下图的半径是 12,可以明显看到下图的斜角尺寸更大。这里使用高斯模糊特效主要是为了令源图像产生透明度(Alpha)的渐变,以便于下一步进行处理。这里还可以选用 SharpDX.Direct2D1.Effects.Shadow 阴影特效,它同样可以产生透明度的渐变。

图 3 不同高斯模糊半径的对比

接下来,为 GaussianBlur 特效的结果应用 SharpDX.Direct2D1.Effects.PointSpecular 特效,这个特效是斜角效果的关键,这个特效实际上是将源图像当作一个反射面,用源图像的 Alpha 通道表示反射面的高度,然后用一个点光源照射到源图像上,得到的反射结果就是特效的处理结果。这样,上一步高斯模糊得到的 Alpha 渐变,就相当于令源图像产生了一个“凸起”。

PointSpecular 特效有很多参数,包括光源位置、颜色、聚焦、表面缩放比例等等,不同的参数就会产生不同的“斜角”效果。LightPosition 属性是光源的位置,它可以改变斜角的方向,如图 4 所示,上图的光源在上方,下图的光源更加偏右,得到的效果也不同。

图 4 不同光源位置的对比

SurfaceScale 属性是表面的缩放比例,它可以改变斜角的高度,如图 5 所示。

图 5 不同斜角高度的对比

PointSpecular 特效的其它参数也可以对最终的斜角效果产生影响,这就需要自己去测试了。对 PointSpecular 特效的详细解释可进一步参见 Spot-specular lighting effect。

然后,用 SharpDX.Direct2D1.Effects.Composite 特效将源位图PointSpecular 特效的结果组合起来。Composite 特效的组合原则很简单,就是根据 Mode 属性的不同,选择输出不同输入的像素。关于该特效具体的组合原则,可以参见 Composite effect。

从图 2 中可以看到,PointSpecular 特效的结果要比源位图更大,而且其中存在一些不需要部分。这里应用一个 Composite 特效,并将 Mode 属性设置为 CompositeMode.SourceIn,这样它的组合原则是 O = DA * S,即输出的像素 = Destination 的 Alpha 值 * Source。其中 Destination 是第一个输入(索引 0,即源位图),Source 是第二个输入(索引 1,即 PointSpecular 特效的结果)。这样就可以将 PointSpecular 特效的结果中不需要的部分剔除掉了。

最后一步,利用 SharpDX.Direct2D1.Effects.ArithmeticComposite 特效将源位图Composite 特效的结果组合起来。ArithmeticComposite 特效是“算术组合”特效,它采用公式 $Output_{rgba} = C_1 * Source_{rgba} * Destination_{rgba} + C_2 * Source_{rgba} + C_3 * Destination_{rgba} + C_4$ 来将两个输入位图的像素组合起来,更多信息可以参考 Arithmetic composite effect。

这里组合公式的四个值(由 Coefficients 属性设置) $C_1,C_2,C_3$ 和 $C_4$ 会决定最终的输出效果。这四个值的取值与之前 PointSpecular 特效的属性是非常相关的,在这个例子中,一直采用的一组值是 Vector4(0.0f, 1.0f, 1.0f, 0.0f),如果将这组值改成 Vector4(1.0f, 0.5f, 0.0f, 0.0f),则会如图 6 所示,下边的新值产生的斜角效果明显偏暗。

图 6 不同 Coefficients 属性的对比

如果更换一组 PointSpecular 特效的属性,即除了 SurfaceScale 仍然设置为 5f 以外,其他属性全部取默认值,上面两组 Coefficients 属性得到的结果如图 7 所示,反而是旧值偏亮,新值颜色比较正,但斜角效果不是很明显。

图 7 新的光照条件下不同 Coefficients 属性的对比

总的来说,斜角效果的实现步骤是基本固定的,就是上面的五个步骤。斜角的尺寸、高度和方向也可以很容易确定,尺寸对应于 GaussianBlur 特效的 StandardDeviation 属性,高度对应于 PointSpecular 特效的 SurfaceScale 属性,方向对应于 PointSpecular 特效的 LightPosition 属性。但是斜角特效的颜色则会比较复杂,会由 PointSpecular 特效的 SpecularExponent 属性、SpecularConstant 属性和 ArithmeticComposite 特效的 Coefficients 属性共同决定,而且 LightPosition 属性也会一定程度上影响斜角特效的颜色,这个就需要经验和试验了。

所有源代码和用到的类库都可以在这里下载。

转载于:https://www.cnblogs.com/cyjb/p/Direct2DBevelEffect.html

C# 使用 Direct2D 实现斜角效果相关推荐

  1. coreldraw凸起字符_CorelDRAW X7创建斜角效果图文教程

    斜角效果通过使对象的边缘倾斜,将三维深度立体效果添加到图形或文本对象.为对象创造凸起或浮雕的视觉效果.创建出的效果可以随时移除,斜角效果只能应用到矢量对象和美术字,不能应用到位图. CorelDRAW ...

  2. 在 WinForm 中使用 Direct2D

    在 C# 的 WinForm 应用中,界面的绘制使用的是 GDI+.不过在一些特别的应用中,可能需要用硬件加速来提高绘制的效率.下面就来介绍两种在 WinForm 应用中嵌入 Direct2D 的方法 ...

  3. 关于Direct2D

    ㈠ 关于Direct2D Direct2D是一个硬件加速的,提供立即模式的二维图形API.它提供了二维的几何体,位图,文本的高性能,高质量的渲染.十分方便的是,Direct2D与GDI,GDI+和D3 ...

  4. html图片倒角,CSS实例:纯CSS打造斜角

    关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...

  5. Windows 2D 绘图 (GDI, GDI+, Direct2D)

    Windows 2D 绘图 GDI GDI 函数 GDI+ GDI 和 GDI+ 的区别 GDI+ 新特性 Direct2D 视觉效果 demo GDI GDI 是 Graphics Device I ...

  6. Direct2D学习教程(一)

    转自 http://www.cnblogs.com/ComputerG/archive/2012/03/14/2396550.html ㈠ 关于Direct2D Direct2D是一个硬件加速的,提供 ...

  7. html立体魔方图片制作,AI软件如何打造立体魔方 Ai如何使用3D效果快速生成三个面贴图立体魔方...

    矢量图制作软件Adobe Illustrator如何快速生成立体魔方?魔方是立体.多面的,使用Ai软件自带的3D效果三种之一的凸出和斜角,能创建具有凸出和斜角效果的立体魔方.在3D效果中,选择三个面贴 ...

  8. css3选项卡样式,css3选项卡标题样式设计1

    说起来惭愧,这个实例以前看起来的时候,看得莫名其妙,一时云里雾里.于是静下心来仔细研究下,才终于发现这个窍门.这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了,各位firebug就 ...

  9. uniapp动态修改样式_掌握Photoshop图层样式技术

    凹凸贴图效果 "等等,什么?" 您会惊叹:""图层样式"菜单中没有凹凸贴图效果!" 的确如此,但是通过将"图案覆盖"和& ...

最新文章

  1. AOSuite V2.7 发布,JavaEE快速开发平台
  2. SQL语句中拆分字段
  3. Leetcode 系列 | 反转链表
  4. RabbitMQ的消息确认机制
  5. 迷惑!博士生发Nature造假,怕被调查扔掉实验室万元电脑
  6. java实时读取文件内容,java实时读取和写入文件
  7. opencv方框内图像保存_opencv 图像滤波(均值,方框,高斯,中值)
  8. 第一步,统一头文件的大小写
  9. DIY RazorEngine 的程序集生成方式
  10. Impala与Hive的关系
  11. SDWebImage的简单使用
  12. 如何在Mac上更改“终端”窗口光标?
  13. 荣新广源B班20121207作业
  14. iOS表示图下拉刷新控件
  15. Linux源码包和脚本安装包的安装方法
  16. 【数字逻辑设计】电路原理图
  17. 总有一种正能量触动你的心灵,读刘丁宁的一封信
  18. MySQL高可用MMM
  19. 训练人物和摩托车的yolov4-tiny模型教程
  20. hexo的next主题换到Yelee(Yilia)

热门文章

  1. 《深入理解计算机系统》第一章
  2. c汇编语言例题,第三章 汇编语言程序设计例题习题
  3. ubuntu 安装中文输入法(超简靠谱版)
  4. php仿阿里巴巴,php实现的仿阿里巴巴实现同类产品翻页
  5. 主题:内存的管理 DATE:2004-09-17
  6. 2023年技术分析|血氧仪芯片方案
  7. 麻醉学专业名词解释(比较全面)
  8. 构建Delaunay三角网的VB源程序
  9. ubuntu18.04 network有线网络图标缺失解决记录
  10. 国内CRM系统哪家好 CRM管理系统推荐