得鹿梦鱼 得鹿梦鱼
知识库 前端技能树 面试题 学习资料 关于本人

图元

通常，任何影响图元显示方法的参数一般被称为属性参数
维护属性和其他参数当前值表的图形系统称为状态系统或者状态机
输出图元的属性和当前帧缓存位置等其他参数被称为状态变量或状态参数

颜色和灰度

颜色是所有图元的一个基本属性。用户可以选择多种颜色，依赖与特定系统的能力和设计目标

RGB颜色分量

在彩色光栅系统中，可选用的颜色数量依赖与帧缓存中提供的存储容量，颜色信息可用两种方式存储在帧缓存中，

  1. 直接在帧缓存中存储RGB编码
  2. 将颜色码存入一个独立的表中并在像素位置存储只想颜色表表项的索引

灰度

当RGB函数中指定相同量的红色、绿色、蓝色时，结果是某种程度的灰色，靠近0的值生成暗灰色，靠近255的地方生成亮灰色

颜色调和

先将第一个颜色对象装载进帧缓存，在将第二个对象的颜色与帧缓存中的颜色相混合来实现两个对象颜色的调和

点

一般情况下，我们可以设定点的两个属性颜色和*大小,在一个描述系统中，点的显示颜色和大小有存放在属性表中的当前值确定，颜色分量用RGB值或者指向颜色表的索引值设定

线

直线段可以使用是三个基本属性来显示颜色、现宽和线型

曲线

曲线属性的参数和线段相同，可以采用颜色、现宽和点划线模式以及有效的画笔和画刷
各种宽度的光栅曲线绘制：

  • 使用水平段或者垂直段进行显示：曲线的斜率的绝对值小于1时使用垂直段，斜率的绝对值大于1时绘制水平段
  • 使用指定的曲线路径作为第一条边界，然后在内侧或者外侧建立第二条边界

填充区属性

基本方法

  1. 扫描线方法：先确定穿过区域的扫描线重叠段，沿这些重叠段的位置设定填充色
  2. 种子算法：从一个给定的内点开始，逐个像素向外绘制，直到碰到指定的边界情况

填充模式

  1. 单一颜色填充
  2. 指定填充图案
  3. 只给出边界的空心模式
  4. 颜色调和填充

通过扫描线填充算法

要实现区域的扫描线填充必须要先确定填充区边界和屏幕扫描线的交点位置，然后将填充色应用与扫描线上位于填充区域内部的每一段，
扫描线填充算法采用奇偶规则识别统一内部区域
最简单的填充区域是多边形，因为每一个扫描线与多边形的交点可以通过求解一对对立的线性方程来获得，其中扫描线的方程式y=fxy=fx

多边形区域的实心填充扫描过程

对每一条与多边形相交的扫描线，与边的交点从左向右排序，且将每一对交点之间的像素位置包括这对交点在内，设定为指定颜色
如下图所示

多边形区域的实心填充扫描过程
与边界的四个交点像素位置定义了两组内部像素，这样填充色应用于从x=10x = 10到x=14x=14的5个像素和从x=18x=18到x=24x=24的7个像素
注意，每当一条扫描线经过多边形的一个顶点时，扫描线在该顶点处与多边形的两条边相交，这种情况就有可能导致在这条扫描线的交点列表中需要发生变化，如下图中所示，2表示的位置

与顶点重合

通过关注相交边的相对于扫描线的位置，可以发现上图中扫描线yy和y′y'之间的拓扑差异，对于扫描线yy,共享一个顶点的两条相交边位于扫描线的两侧，但是对于扫描线y′y'，两条相交边在扫描线的同一侧，因此，哪些在扫描线两侧有连接边的顶点应该设计为一个顶点，可以通过顺时针或者逆时针方向来搜索多边形边界，并观察从一条边迁移到另一条边时顶点yy坐标的相对变化来识别这个点，假如两条相邻边的是三个端点的y值单调递增或者递减，那么对于任何该顶点的扫描线，必须将该顶点进行共享为一个顶点，否则，共享的顶点表示多边形的一个极值点，将这条边与穿过该顶点的扫描线的交点添加到相关列表中

将顶点交点调整为一个或者两个的一种实现方法是将多边形的某些边缩短，从而分离哪些应计为一个顶点的顶点，我们可以按照顺时针或者逆时针方向处理整个多边形上的非水平边，在处理每条边时进行检测，确定该边与下一条非水平线是否有单调递增或者递减的端点y值，假如有，可以将短的一边静缩短，从而保证通过该公共顶点的扫描线只有一个交点生成，如下图所示

缩短处理

一般情况下，场景一部分的某些特征会以某种方式与该场景中另一部分的特征相关，且这些相关特征可用于计算机图形学算法中减少处理，相关方法经常包括沿一条边从一条扫描线到下一条扫描时斜率为常数这一事实，可以沿着任一边采用增量坐标计算
如下图所示

增量计算

斜率为m=yk+1−ykxk+1−xkm = \frac{y_{k+1} - y_k}{x_{k+1} - x_k}
两条扫描线间y坐标的变化很简单为Δy=yk+1−yk=1\Delta y = y_{k+1} - y_k = 1
上面一条扫描线的x交点值为xk+1x_{k+1}，可以通过前一条扫描线的x的交点xkx_k来确定
xk+1=xk+1mx_{k+1}=x_k + \frac{1}{m}
因此，每个后继交点的x值都可以通过增加斜率的倒数并取整而计算

算法过程

扫描线k沿着一条具有斜率m的边，相当于最初的扫描线的交点xkx_k可以计算为xk=x0+1mx_k=x_0+\frac{1}{m}
在顺序填充算法中，沿一条边x方向的增量值，可以通过调用斜率m为两整数比的整数运算来完成m=ΔyΔxm=\frac{\Delta y}{\Delta x}
因此沿一条边对连续两条扫描线交点的x增量计算可以表示为xk+1=xk+ΔyΔxx_{k+1}=x_k+\frac{\Delta y}{\Delta x}

  1. 先将计数器初始化为0，然后每当移向一条新的扫描线时，计数器就自增1，从而完成交点x的整数值
  2. 当计算器的值大于等于Δy\Delta y时，当前交点x值增加1，并将计算器减去Δy\Delta y，这个过程相当于保持x的整数和小数部分
  3. 从多边形的底部到顶部处理扫描线，对每条与多边形相交的扫描线生一个活化边表

具体代码实现可以参考直线的生成算法_BresenHam

不规则边界区域的填充算法

边界填充算法

假设边界是以单一颜色指定的，则填充算法可以逐个像素的向外处理，直至遇到边界颜色。这种方法称为边界填充算法，用于比较容易得指定内点交互式绘画软件。

具体内容可以参考边界填充算法

字符属性

显示的字符外观由字体、大小、颜色、方向、对齐方式以及字符之间的间隔这些属性控制

反走样

由于取样过是将物体上的坐标点数字化为离散的整数像素位置，因此光栅算法生成的图元显示具有锯齿形或者阶梯状外观，这种由于低频取样而造成的信息失真被称为走样，
使用矫正不充分取样的过程叫做反走样

增加光栅系统取样频率的一种方法是简单的以较高分辨率分辨率显示对象，但是，即使用当前技术能达到的最好分辨率，仍然会在一定范围内出现锯齿，由于在实现帧缓存的最大容量并且保持杀心频率在每秒60帧或者以上等方面存在一定的限制，而且要用连续参数精确的表示对象，则需要任意晓得取样间隔。

对于能显示两级以上亮度的光栅系统，可以使用反走样方法来修改像素亮度，通过适当的改变图元边界的像素亮度，可以平滑边界或者减少锯齿现象

一种简单、直接的反走样方法，就是吧屏幕看成由比实际更细的网格所覆盖，从而增加取样频率，然后根据这种更细网格，使用取样点来确定每个屏幕像素的合适亮度等级，这种在高分辨率下对于对象特性的取样并在较低分辨率下显示其结果的技术称为过取样，也成后过滤

可以代替过取样的另一种方法是，通过计算待显示的每个像素在对象上的覆盖区域来确定像素亮度，计算覆盖区域的反走样称为区域取样

图元
≡