小白谈计算机图形学(一)如何画线

引言

大家好,众所周知,计算机的图像显示是由一个一个像素组成,正如分子组成了世界,当像素合理分布,同样可以还原很多真实世界的场景。

如何画线

基本思想

已知过端点 p 0 ( x 0 , y 0 ) p_0(x_0,y_0) p 1 ( x 1 , y 1 ) p_1(x_1,y_1) 的直线:
y = k x + b y=kx+b
直观的做法是把每个 x x 的值代入直线方程求出相应的 y y 值。取像素点 ( x , i n t ( y ) ) (x, int(y)) 作为当前点坐标。光栅直线算法属于图形学最底层的算法,因此要精益求精。

数值微分法(DDA算法)

数值微分基本思路

增量算法变乘法为加法,这里利用斜截式,首先 y i + 1 = y i + k Δ x y_{i+1}= y_i+ k\Delta x ,当 Δ x = 1 \Delta x=1 时:
y i + 1 = y i + k y_{i+1}= y_i+ k

数值微分改进

  • 此处,我们做细节处理,将像素格划分为上半和下半, 用 i n t ( y + 0.5 ) int(y+0.5) 判断是上方还是下方涂色。
    在这里插入图片描述
  • 同时该算法只能画 k 1 |k| \leq1 ,超过则会出现离散的点,失真。可以采用:
    { y i + 1 = y i + k ( k 1 Δ x = 1 x i + 1 = x i + 1 k ( k 1 Δ y = 1 \left\{ \begin{aligned} y_{i+1} = y_i+k( ︱k︱<1,\Delta x =1)\\ \\ x_{i+1} = x_i+\frac{1}{k}( ︱k︱>1,\Delta y =1) \end{aligned} \right.
  • 优点:简单直观,迭代的算法
    缺点:浮点运算,每步都需四舍五入取整。

中点画线法

中点画线引言

利用后一中点与前一中点的函数关系,采用了直线的一般式方程
F ( x , y ) = y y 1 y 0 x 1 x 0 x b F(x,y)=y-\frac{y_1-y_0}{x_1-x_0}x-b
认为 Δ x > 0 \Delta x>0 ,即:
F ( x , y ) = ( Δ x ) y ( Δ y ) x ( Δ x ) b F(x,y)=(\Delta x)y-(\Delta y)x-(\Delta x)b
直线方程将平面分为三个区域:
{ F ( x , y ) = 0 ( 线 ) F ( x , y ) > 0 ( 线 ) F ( x , y ) < 0 ( 线 ) \left\{ \begin{aligned} F(x, y) = 0(直线上的点)\\ F(x, y) > 0(直线上方的点) \\ F(x, y) < 0(直线下方的点) \end{aligned} \right.
在这里插入图片描述
M M Q Q 的下方,则说明 P u P_u 离直线近,应为下一个像素点;当 M M Q Q 的上方,应取 P d P_d 为下一点。但是…每一个像素的计算量是4个加法,两个乘法。比DDA算法的计算量大多了,毫无可取之处!

中点画线改进

根据上一次计算的 d d 值判断接下来 d d 值的变化

  • d < 0 d<0 时,则取右上方像素 p u ( x i + 1 , y i + 1 ) p_u(x_i+1, y_i+1) 。判断再下一
    像素,则要计算:
    d n e w = F ( x i + 2 , y i + 1.5 ) = a ( x i + 1 ) + b ( y i + 0.5 ) + c + a = F ( x i + 1 , y i + 0.5 ) + a + b = d o l d + a + b \begin{aligned} d_{new}&=F(x_i+2,y_i+1.5)\\ &=a(x_i+1)+b(y_i+0.5)+c+a\\ &=F(x_i+1,y_i+0.5)+a+b\\ &=d_{old}+a+b \end{aligned}
  • d 0 d \geq 0 情况,则取正右方像素 ( x i + 1 , y i ) (x_i+1, y_i) , 判断下一个像素位置要计算:
    d n e w = F ( x i + 2 , y i + 0.5 ) = a ( x i + 1 ) + b ( y i + 0.5 ) + c + a = F ( x i + 1 , y i + 0.5 ) + a = d o l d + a \begin{aligned} d_{new}&=F(x_i+2,y_i+0.5)\\ &=a(x_i+1)+b(y_i+0.5)+c+a\\ &=F(x_i+1,y_i+0.5)+a\\ &=d_{old}+a \end{aligned}
  • 迭代需要初始值 d 0 d_0
    d 0 = F ( x 0 + 1 , y 0 + 0.5 ) = a ( x 0 + 1 ) + b ( y 0 + 0.5 ) + c = a + 0.5 b \begin{aligned} d_0&=F(x_0+1,y_0+0.5) \\&=a(x_0+1)+b(y_0+0.5)+c \\&=a+0.5b \end{aligned}
  • 由于我们只用 d d 的符号,所以使用 2 d 2d 摆脱小数运算更新后的公式为:
    { d 0 = 2 a + b d o l d = d n e w + 2 a + 2 b ( d < 0 ) d o l d = d n e w + 2 a ( d 0 ) \left\{ \begin{aligned} &d_0= 2a+b\\ &d_{old}=d_{new}+2a+2b(d<0) \\ &d_{old}=d_{new}+2a(d \geq 0) \end{aligned} \right.

Bresenham画线法

Bresenham基本思路

采用增量计算,检查误差项的符号,就可以确定该列的所求像素。

  • 直线的起始点在像素中心,所以误差项d的初值
    { d 0 0 d n e w = d o l d + k x i + 1 = x i + 1 ( ) y i + 1 = { y i + 1 , d = d 1 ( d 0.5 ) ( ) y i ( d < 0.5 ) ( ) \left\{ \begin{aligned} &d_0=0\\ &d_{new}=d_{old}+k\\ &x_{i+1}= x_i+1(右移一格)\\ &y_{i+1}= \left\{ \begin{aligned} &y_i+1,d=d-1&(d\geq0.5)(上移一格)\\ \\ &y_{i}&(d < 0.5)(保持不动) \end{aligned} \right. \\ \end{aligned} \right.
    在这里插入图片描述

Bresenham画线改进

  • e = d 0.5 e=d-0.5
    { e 0 = 0.5 e n e w = e o l d + k x i + 1 = x i + 1 ( ) y i + 1 = { y i + 1 , d = d 1 ( e 0 ) ( ) y i ( e < 0 ) ( ) \left\{ \begin{aligned} &e_0=-0.5\\ &e_{new}=e_{old}+k\\ &x_{i+1}= x_i+1(右移一格)\\ &y_{i+1}= \left\{ \begin{aligned} &y_i+1,d=d-1&(e\geq0)(上移一格)\\ \\ &y_{i}&(e < 0)(保持不动) \end{aligned} \right. \\ \end{aligned} \right.
  • e 2 e*2 e 0 e_0 变为整数,由于 p 0 ( x 0 , y 0 ) , p 1 ( x 1 , y 1 ) p_0(x_0,y_0),p_1(x_1,y_1) 皆为整数,故 d Δ x d* \Delta x 即为斜率乘 Δ x \Delta x 即为 Δ y \Delta y 为整数,故第二步改进令:
    e = e 2 Δ x e=e*2*\Delta x
    判断 e e 的正负,更新后的公式为:
    { e = Δ x ( ) e n e w = e o l d + 2 Δ y ( ) x i + 1 = x i + 1 ( ) y i + 1 = { y i + 1 , e = e 2 Δ x ( e 0 ) ( ) y i ( e < 0 ) ( ) \left\{ \begin{aligned} &e= -\Delta x(初始值)\\ &e_{new}= e_{old}+2\Delta y(初始值)\\ &x_{i+1}= x_{i}+1(右移一格)\\ &y_{i+1}= \left\{ \begin{aligned} &y_i+1,e=e-2\Delta x&(e\geq0)(上移一格)\\ \\ &y_{i}&(e < 0)(保持不动) \end{aligned} \right. \\ \end{aligned} \right.

小结

避免浮点运算,进行整数算法判断像素点位置,就必须判断符号,如中点画线法和Bresenhanm算法,判断大小不能搞成整数加法。
wuli放几张做好的图,大家康康c语言可以画图呀!
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

发布了2 篇原创文章 · 获赞 0 · 访问量 1300

猜你喜欢

转载自blog.csdn.net/liuyiming2019/article/details/105022683