用AGG实现高质量图形输出（二）

雨点打透心脏的1/2处 2022-05-16 14:09 31阅读 0赞

# 用AGG实现高质量图形输出（二） #

来自[http://www.cppprog.com/2009/0821/150.html][http_www.cppprog.com_2009_0821_150.html]

[上次][Link 1]讲了AGG的显示原理并举了一个简单的例子，这一篇文章开始讲AGG工作流程里的每个环节。为了方便对照，再放一次AGG显示流程 图

![agg显示流程][agg]

另外，[上 一篇文章][Link 1]里的[例 程][Link 1]也 很重要，后面的例子都将基于这个代码。

下面，我们来考察AGG显示流程中的每个环节。理解每个环节最好的方法是编写实验代码，建议先参照[这里][Link 1]建 立一个可以运行的AGG实验环境。

# 顶点源(Vertex Source) #

## 顶点源(Vertex Source) ##

顶点源是一种可以产生多边形所需要的“带命令的顶点”的对象。比如三角形顶点源，就应该会产生一个带“MoveTo”命令的点，另外二 个带"LineTo"命令的点和最终闭合的“ClosePoly”命令。

#### 头文件 ####

#include <agg_path_storage.h> //path_storage
    #include <agg_ellipse.h>  // ellipse
    #include <agg_arc.h> // arc
    #include <agg_arrowhead.h> // arrowhead
    #include <agg_curves.h> // curve3, curve4
    #include <agg_gsv_text.h> // gsv_text, gsv_text_outline
    #include <agg_rounded_rect.h> // rounded_rect
    ...

#### 类型 ####

<table style="text-align:left;"> 
 <tbody> 
  <tr> 
   <td>自定义类</td> 
   <td>所有实现了void rewind(unsigned path_id);和unsigned vertex(double* x, double* y);的类。</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">ellipse</td> 
   <td>圆，输入为中心点坐标和XY轴半径，本文所用的<a href="http://www.cppprog.com/2009/0816/146.html" rel="nofollow"><span style="color:#1f3a87;">例子</span></a>就 使用了这个顶点源</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">arc</td> 
   <td>弧线，输入为中心点坐标和XY轴半径，以及起始和终止角(rad)，顺时针/逆时针方向</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">curve3</td> 
   <td>贝塞尔曲线，输入为起点坐标、第一控制点坐标、终点点坐标</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">curve4</td> 
   <td>贝塞尔曲线，输入为起点坐标、第一控制点坐标、第二控制点坐标、终点坐标</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">gsv_text</td> 
   <td>使用AGG自带字模的文字输出（只支持ASCII码），使用start_point方法指定文字位置，text方法指定 文字，flip指定是否上下倒转，size指定文字大小，适合与conv_stroke或gsv_text_outline配合。</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">gsv_text_outline&lt;&gt;</td> 
   <td>可变换文字，输入为gsv_text和变换矩阵(默认为trans_affine，后文会提到)。width方法设置文 字宽度</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">rounded_rect</td> 
   <td>圆角方形，输入为左上角右下角坐标和圆角半径</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">path_storage</td> 
   <td>路径存储器，可以用join_path方法加入多个顶点源。而且path_storage本身支持move_to, line_to，curve和arc_to等画线功能</td> 
  </tr> 
  <tr> 
   <td style="font-weight:bold;">arrowhead</td> 
   <td>箭头，它是作为标记点来用的</td> 
  </tr> 
 </tbody> 
</table>

其中的arrowhead颇为特殊，它一般作为线段的标记点，具体用法是这样的：

arrowhead ah;
    ah.head(d1,d2,d3,d4); //定义箭头
    ah.tail(d1,d2,d3,d4); //定义箭尾
    VertexSource VS; //其它顶点源
    // 使用顶点转换器，并指定Markers类型为vcgen_markers_term
    // 顶点转换器可以是conv_dash、conv_stroke或conv_marker_adaptor，见后文《坐标转换管道》
    // vcgen_markers_term:以端点作为标记点
    conv_stroke<VertexSource, vcgen_markers_term> csVS(VS);
    ...draw_term
    // 用conv_marker指定ah作为线段marker点的标记
    conv_marker<vcgen_markers_term, arrowhead> arrow(csVS.markers(), ah);
    ras.add_path(csVS);
    ras.add_path(arrow); //marker要紧随其后加入
    ...render

ah.head()和ah.tail()方法中的d1,d2,d3,d4参数的意义见下图

![arrowhead][]

#### 例，画一条简单的箭头直线(基于[此处代码][Link 1]) ####

在on\_draw()方法最后加上下列代码：

1.  agg::arrowhead ah;
2.  ah.head(0,10,5,5);
3.  ah.tail(10,10,5,5);
4.  // 用path\_storage生成一条直线
5.  agg::path\_storage ps;
6.  ps.move\_to(160,60);
7.  ps.line\_to(100,100);
8.  // 转换
9.  agg::conv\_stroke<agg::path\_storage, agg::vcgen\_markers\_term> csps(ps);
10. agg::conv\_marker<agg::vcgen\_markers\_term, agg::arrowhead>
11. arrow(csps.markers(), ah);
12. // 画线
13. ras.add\_path(csps);
14. agg::render\_scanlines\_aa\_solid(ras,sl,renb,agg::rgba8(0,0,0));
15. // 画箭头
16. ras.add\_path(arrow);
17. agg::render\_scanlines\_aa\_solid(ras,sl,renb,agg::rgba8(255,0,0));

##### 得到的图形是: #####

![arrow demo][]

注意要加头文件:

#include "agg_conv_marker.h"
    #include "agg_arrowhead.h"
    #include "agg_path_storage.h"
    #include "agg_vcgen_markers_term.h"

#### 试验代码，自定义一个顶点源(基于[此处代码][Link 1]) ####

为了对顶点源有更深入的了解，我们要自己实现一个顶点源，这个顶点源只是很简单的一个三角形。

前面说过，只要实现了 void rewind(unsigned path\_id); 和 unsigned vertex(double\* x, double\* y); 方法就可以作为顶点源。

**rewind**方 法指示顶点源回到第一个顶点；**vertex**方 法取出当前顶点然后把当前顶点下移，返回值是当前顶点所带的命令。所谓的命令是一个enum path\_commands\_e类 型，定义如下：

1.  enum path\_commands\_e
2.  \{
3.  path\_cmd\_stop = 0, //----path\_cmd\_stop 
4.  path\_cmd\_move\_to = 1, //----path\_cmd\_move\_to
5.  path\_cmd\_line\_to = 2, //----path\_cmd\_line\_to
6.  path\_cmd\_curve3 = 3, //----path\_cmd\_curve3 
7.  path\_cmd\_curve4 = 4, //----path\_cmd\_curve4 
8.  path\_cmd\_curveN = 5, //----path\_cmd\_curveN
9.  path\_cmd\_catrom = 6, //----path\_cmd\_catrom
10. path\_cmd\_ubspline = 7, //----path\_cmd\_ubspline
11. path\_cmd\_end\_poly = 0x0F, //----path\_cmd\_end\_poly
12. path\_cmd\_mask = 0x0F //----path\_cmd\_mask 
13. \};

path\_commands\_e还 能和path\_flags\_e组 合：

1.  enum path\_flags\_e
2.  \{
3.  path\_flags\_none = 0, //----path\_flags\_none
4.  path\_flags\_ccw = 0x10, //----path\_flags\_ccw 
5.  path\_flags\_cw = 0x20, //----path\_flags\_cw 
6.  path\_flags\_close = 0x40, //----path\_flags\_close
7.  path\_flags\_mask = 0xF0 //----path\_flags\_mask
8.  \};

vertex()返回的命令中含有**path\_cmd\_stop**时 表示结束。

1.  // 等边三角形
2.  class triangle\{
3.  public:
4.  triangle(double cx, double cy, double r)//中心点，r为中心点到边的长度
5.  \{
6.  // 直接准备好三个点
7.  m\_step = 0;
8.  m\_pt\[0\].x = cx; m\_pt\[0\].y = cy-r;
9.  m\_pt\[1\].x = cx+r\*0.866; m\_pt\[1\].y = cy+r\*0.5;
10. m\_pt\[2\].x = cx-r\*0.866; m\_pt\[2\].y = cy+r\*0.5;
11. //AGG把方向作为区分多边形内部和外部的依据，可以试试m\_pt\[1\]和m\_pt\[2\]对调
12. \}
13. void rewind(unsigned)
14. \{
15. m\_step = 0;
16. \}
17. unsigned vertex(double\* x, double\* y)
18. \{
19. switch(m\_step++)
20. \{
21. case 0:
22. //第一步，move\_to
23. \*x = m\_pt\[0\].x;
24. \*y = m\_pt\[0\].y;
25. return agg::path\_cmd\_move\_to;
26. case 1:
27. case 2:
28. //第二、三步，line\_to
29. \*x = m\_pt\[m\_step-1\].x;
30. \*y = m\_pt\[m\_step-1\].y;
31. return agg::path\_cmd\_line\_to;
32. case 3:
33. // 第四步，闭合多边形
34. return agg::path\_cmd\_end\_poly|agg::path\_flags\_close;
35. default:
36. // 第五步，结束
37. return agg::path\_cmd\_stop;
38. \}
39. \}
40. private:
41. agg::point\_d m\_pt\[3\];
42. unsigned m\_step;
43. \};

在on\_draw()方法里把

agg::ellipse ell(100,100,50 ,50); 改成 triangle ell(100,100,50);  
typedef agg::conv\_contour< agg::ellipse> ell\_cc\_type;改成typedef agg::conv\_contour< triangle> ell\_cc\_type;

##### 得到的图形是: #####

![triange demo][]

除了文字输出功能（gsv\_text只能输出ASCII文字），上面这些顶点源提供的图形丰富程度已经超过了系统API。文字输出功能 将以单独的篇幅讲述。

[http_www.cppprog.com_2009_0821_150.html]: http://www.cppprog.com/2009/0821/150.html
[Link 1]: http://www.cppprog.com/2009/0816/146.html
[agg]: /images/20220503/6b2ac6083d48464fb5acb018039317e0.png
[arrowhead]: /images/20220503/abb7004e216a445fa79cdd30331af07b.png
[arrow demo]: /images/20220503/7c8fb66f849049509755983165ac4ea4.png
[triange demo]: /images/20220503/3206204d4130484ebaf4350af783da29.png