如何在WPF绘图中通过贝塞尔曲线绘制

知名青少年白癜风研究专家 https://myyk.familydoctor.com.cn/2831/schedule_111467_1/

GDI图形系统已经形成了很多年。它提供了2D图形和文本功能,以及受限的图像处理功能,在传统的WindowsForm编程中,我们经常使用Graphics图形对象的DrawCurve方法绘制平滑的曲线。

该方法定义如下:

publicvoidDrawCurve(Penpen,Point[]points,floattension)

其中tension参数是弯曲强度(张力),用来确定样条的形状及平滑点直接的连线,该值范围为0.0f~1.0f,默认0.5,超出此范围会产生异常,当弯曲强度为零时,两点直接的连线就成了直线。

WPF绘图编程与传统GDI编程有显著不同,WPF中已经提供很多更强大灵活的方法进行绘制,可以方便绘制任意的矢量图形。

DrawingContext比较类似WinForm中的Graphics类,是基础的绘图对象,用于绘制各种图形,它主要API有如下几种:

常用的基础的绘图API有:

DrawEllipseDrawGeometryDrawGlyphRunDrawImageDrawRectangleDrawRoundedRectangle基本绘图API跟GDI中的类似,大家发现了没有?WPF并没有DrawCurve的方法,虽然z有DrawGeometry方法可以绘制图形,但是找不到没有“张力”的参数。由于没有提供与DrawCurve方法等价的方法,WPF中没有提供方法调用来绘制光滑曲线,我们可以通过一系列贝塞尔曲线绘制一个平滑的曲线。

贝塞尔曲线(Béziercurve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度);移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。

上图显示了这四个点是如何决定曲线形状的。曲线从起始点(A)开始,向第一个控制点(B)的方向移动。它在终点(D)结束,从第二个控制点(C)的方向来。图中的蓝色线显示了端点和控制点之间的方向。

从起点和终点到控制点的距离决定了曲线与蓝色线的距离。如果控制点较远,则曲线沿蓝色线较长。

要绘制一条连接一系列点的平滑曲线,可以构建多个从这些点开始和结束的贝塞尔曲线。为了使曲线平滑,你需要在相邻的曲线上对齐控制点,使它们的上图蓝色指向相同的方向。下图显示两条贝塞尔曲线平滑地连接在一起。第一条曲线的第二个控制点(标记为“control1b”)和第二条曲线的第一个控制点(标记为“control2a”)与连接两条Bezier曲线的点共线。

根据需要我们可以移动控制点控制1b和控制2a离它们控制的点更近或更远,只要这三个点是共线的。例如,您可以将控件2a移动到更靠近点的位置,使第二条贝塞尔曲线在开始时变得更紧。就像GDI绘图中DrawCurve方法提供了一个参数tension(它允许您调整控制点与曲线上的点的距离)一样。当你构建一系列贝塞尔曲线时,你可以单独放置每个控制点。

WPF提供了一个类PolyBezierSegment,你可以用来保存一组连接的Bezier曲线:PolyBezierSegment。该对象包含一个起始点和一组点,这些点包括控制点和Bezier曲线的曲线点。这将非常有用(需要一些工作),但是不能简单地显示一个PolyBezierSegment。

首先,使用您想要连接的点来找到适当的控制点。然后使用它们来构建一个包含PolyBezierSegment对象和所有其他必要的中间对象的路径。这样就可以使用WPF构建平滑的曲线。

寻找控制点

那么如何定义控制点呢?看看右边的图片,它显示了三条连接点A、B、C和D的贝塞尔曲线。现在


转载请注明:http://www.yiyixiexie.net/lcjc/10268.html