贝塞尔曲线，以及用鼠标和贝塞尔曲线交互

Dear 丶 2022-03-30 06:16 415阅读 0赞

![1359202702_6230.gif][]  
  
by 野比喵  
这段时间感觉很蛋疼。。虽然各种游戏玩的很开心。。还是多少要学习一下呗。。  
做了个小东西，贴出来得瑟下。。能力有限，就先这么着了。  
别试图找我要任何代码之类的。。我只是个amateur，这种帖子认真你就输了。。  
别试图接分。。那是不可能的。。  
  
当你对生活不满意，工作不满意，妹妹不满意。。。  
如果不想付出金钱去改变，活该苦逼。  
如果不想付出精力去改变，活该苦逼。  
如果不想付出生命去改变，活该苦逼。  
如果不能忍受别人的鄙视，亲，请给别人一个不鄙视你的理由先。。  
  
  
![1359214967_8822.png][]  
其实这篇没什么技术含量，类似Photoshop里的“钢笔”工具。。  
（代码里面的招数我经常用，可以在前面的帖子里翻到。。  
  
前半部分是理论，可以在数学书上翻。后半部分是实践，其实很简单。。  
  
正文开始  
  
贝塞尔曲线  
贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的参数曲线（2D，3D的称为曲面）。贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表，他运用贝塞尔曲线来为汽车的主体进行设计。  
![1359208807_5534.jpg][]  
线性曲线  
给定点P0、P1，线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出：  
![1359208295_8120.png][]  
当参数t变化时，其过程如下：  
![1359207897_7842.gif][]  
线性贝塞尔曲线函数中的t会经过由P0至P1的B（t）所描述的曲线。例如当t=0.25时，B（t）即一条由点P0至P1路径的四分之一处。就像由0至1的连续t，B（t）描述一条由P0至P1的直线。  
二次曲线  
二次方贝塞尔曲线的路径由给定点P0、P1、P2的函数B（t）追踪：  
![1359208340_5374.png][]  
为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：  
\* 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。  
\* 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。  
\* 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。  
二次曲线看起来就是这样的：  
![1359208080_9518.gif][]  
三次曲线  
为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构。  
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。  
曲线的参数形式为：  
![1359208416_1373.png][]  
看起来就是这样的：  
![1359208177_9516.gif][]  
高阶曲线  
更高阶的贝塞尔曲线，可以用以下公式表示：  
用 ![1359208521_2476.png][]表示由点P0、P1、…、Pn所决定的贝塞尔曲线。则有：  
![1359208559_2462.png][]  
更多的关于贝塞尔曲线的内容，你可以去查阅各种数学书。加油，求知的骚年。  
应用  
在几乎所有的高级图像软件中，均使用到了三次贝塞尔曲线来实现“平滑曲线”绘制功能。例如Photoshop中的“钢笔”，CoralDraw中的“贝塞尔工具”，Fireworks中的“画笔”。  
  
在编程中实现  
计算机绘图  
要“画”出贝塞尔曲线，一般需要进行较多的计算，然后绘制出来，类似这样：  
![1359209392_4754.gif][]  
绘制的代码可以在各类计算机图形学书籍中找到。  
GDI+  
幸运的是，GDI+已经封装好了贝塞尔曲线的绘制代码，如果你想画出贝塞尔曲线，只用调用 [Graphics.DrawBezier][]方法：  
![1359212044_2900.png][]  
这是一个三次贝塞尔曲线，其中4个点分别为：起点，起点控制点，终点，终点控制点。绘制出来的效果如下：  
![1359209843_5561.png][]  
与鼠标的交互  
怎么实现Photoshop里那样可以调整的贝塞尔曲线呢？两种方法：  
\* 输入新参数生成曲线  
\* 用鼠标交互调整曲线  
很显然第二种看起来会拉风很多，那么就来试试看。  
你想要获得是这样的效果：  
![1359207200_3443.png][]  
这是一条三次贝塞尔曲线，图中应该这样解读：  
![1359207211_2992.png][]  
所以需要几个需要解决的：  
\* 表示贝塞尔曲线的锚点和控制点  
\* 绘制曲线和控制点/控制柄  
\* 鼠标交互  
看起来不是很难的样子，那么就来化整为零，各个击破吧。  
锚点  
对于三次贝塞尔曲线而言，有两个锚点：起始点和结束点。每个锚点有两个坐标：本身坐标和控制点坐标。于是，可以用这样的类来描述：  
![1359212096_3845.png][]  
三次贝塞尔曲线  
三次曲线前面已经说过原理了，那么它的结构应该就是这样的：  
![1359212161_2273.png][]  
画出来  
为了简单，就用一个最基本的渲染器来画，代码如下：  
![1359212224_5596.png][]  
画出曲线和控制点及其手柄：  
![1359212277_1511.png][]  
![1359212310_4530.png][]  
画出来的效果就是这样的：  
![1359211362_6364.png][]  
鼠标交互  
和鼠标实际上是这样交互的：  
\* 按下鼠标，如果落点在某个控制点上，就表示选中了该点，否则落空  
\* 移动鼠标，如果选中了某个控制点，则调整控制点坐标至新坐标，否则忽略  
\* 放开鼠标，取消任何选择  
看起来只需要处理MouseDown，MouseMove和MouseUp这三个事件就够了，很容易嘛。  
先弄一个全局标记：  
![1359212358_6148.png][]  
然后处理鼠标事件：  
MouseDown：  
![1359212537_9801.png][]  
MouseMove：  
![1359212627_2263.png][]  
MouseUp：  
![1359212589_4930.png][]  
为了简单，刷新就这么弄了：  
![1359212676_1899.png][]  
更高效的刷新应该只处理脏区。  
效果  
最后看起来就像这样。  
![1359202702_6230.gif][]  
就这么简单。  
  
扩展和优化  
要实现Photoshop那种曲线效果，需要多个锚点连接起来。上面的方法在效率上也还有可以提高的地方。  
怎么办？  
自己看着办。  
（完）

[1359202702_6230.gif]: https://img-my.csdn.net/uploads/201301/26/1359202702_6230.gif
[1359214967_8822.png]: https://img-my.csdn.net/uploads/201301/26/1359214967_8822.png
[1359208807_5534.jpg]: https://img-my.csdn.net/uploads/201301/26/1359208807_5534.jpg
[1359208295_8120.png]: https://img-my.csdn.net/uploads/201301/26/1359208295_8120.png
[1359207897_7842.gif]: https://img-my.csdn.net/uploads/201301/26/1359207897_7842.gif
[1359208340_5374.png]: https://img-my.csdn.net/uploads/201301/26/1359208340_5374.png
[1359208080_9518.gif]: https://img-my.csdn.net/uploads/201301/26/1359208080_9518.gif
[1359208416_1373.png]: https://img-my.csdn.net/uploads/201301/26/1359208416_1373.png
[1359208177_9516.gif]: https://img-my.csdn.net/uploads/201301/26/1359208177_9516.gif
[1359208521_2476.png]: https://img-my.csdn.net/uploads/201301/26/1359208521_2476.png
[1359208559_2462.png]: https://img-my.csdn.net/uploads/201301/26/1359208559_2462.png
[1359209392_4754.gif]: https://img-my.csdn.net/uploads/201301/26/1359209392_4754.gif
[Graphics.DrawBezier]: http://msdn.microsoft.com/zh-cn/library/vstudio/system.drawing.graphics.drawbezier.aspx
[1359212044_2900.png]: https://img-my.csdn.net/uploads/201301/26/1359212044_2900.png
[1359209843_5561.png]: https://img-my.csdn.net/uploads/201301/26/1359209843_5561.png
[1359207200_3443.png]: https://img-my.csdn.net/uploads/201301/26/1359207200_3443.png
[1359207211_2992.png]: https://img-my.csdn.net/uploads/201301/26/1359207211_2992.png
[1359212096_3845.png]: https://img-my.csdn.net/uploads/201301/26/1359212096_3845.png
[1359212161_2273.png]: https://img-my.csdn.net/uploads/201301/26/1359212161_2273.png
[1359212224_5596.png]: https://img-my.csdn.net/uploads/201301/26/1359212224_5596.png
[1359212277_1511.png]: https://img-my.csdn.net/uploads/201301/26/1359212277_1511.png
[1359212310_4530.png]: https://img-my.csdn.net/uploads/201301/26/1359212310_4530.png
[1359211362_6364.png]: https://img-my.csdn.net/uploads/201301/26/1359211362_6364.png
[1359212358_6148.png]: https://img-my.csdn.net/uploads/201301/26/1359212358_6148.png
[1359212537_9801.png]: https://img-my.csdn.net/uploads/201301/26/1359212537_9801.png
[1359212627_2263.png]: https://img-my.csdn.net/uploads/201301/26/1359212627_2263.png
[1359212589_4930.png]: https://img-my.csdn.net/uploads/201301/26/1359212589_4930.png
[1359212676_1899.png]: https://img-my.csdn.net/uploads/201301/26/1359212676_1899.png