C++博客-Shihirahttp://www.cppblog.com/Shihira/Open source - 开放源代码 - 開放原始碼 - オープンソース - 오픈 소스 - Отворен код - متن‌بازzh-cnWed, 08 Apr 2026 23:28:33 GMTWed, 08 Apr 2026 23:28:33 GMT60卷积与平滑滤波器的图像处理应用http://www.cppblog.com/Shihira/archive/2015/08/12/211542.htmlShihiraShihiraTue, 11 Aug 2015 16:35:00 GMThttp://www.cppblog.com/Shihira/archive/2015/08/12/211542.htmlhttp://www.cppblog.com/Shihira/comments/211542.htmlhttp://www.cppblog.com/Shihira/archive/2015/08/12/211542.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/211542.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/211542.html

卷积的介绍

卷积（convolution）是泛函分析里的一个概念，不过泛函分析一般都是数学系才学的，计算机系的学生大多在概率统计课本里了解到。它分为两种形式，一个是离散形式，一个是连续（积分）形式。在图像处理中我们更关心离散卷积，不过也先看看积分形式的卷积。现在假设我们有两个函数f(x)和g(x)，这里g(x)又叫做平滑函数或者卷积核，那么它们在连续空间的卷积是：

(f*g)(x)=\int_{-\infty}^{\infty}f(t)g(x-t)dt

一般我们有一个这样的结论，就是当f(x)经过足够多次相同平滑函数g(x)卷积，就会足够接近高斯函数，也就是正态分布的函数形式。卷积就是一种平滑操作，这说明高斯函数就是“最平滑的函数”。引入热力学中熵的概念，高斯函数就是拥有最高熵的函数，最稳定的状态，以至于自然界大多数的统计规律都呈现出正态分布：

((\cdots((f*g)*g)\cdots)*g)(x) \rightarrow \frac 1{\sigma\sqrt{2\pi}} e^{-x^2/{\sigma^2}}

下面介绍离散形式的卷积。这卷积，首先是由有限项的多项式体现。神奇的是，而它们的乘积就是卷积。首先我们设有两个多项式p = a_0 + a_1 x + a_2 x^2以及q = b_0 + b_1 x + b_2 x^2 + b_3 x^3。计算它们的乘积：

\begin{align*} r = p\cdot q &= (a_0 b_0) \\ &+ (a_0 b_1 + a_1 b_0) x \\ &+ (a_0 b_2 + a_1 b_1+ a_2 b_0) x^2 \\ &+ (a_0 b_3 + a_1 b_2 + a_2 b_1) x^3 \\ &+ (a_1 b_3 + a_2 b_2) x^4 \\ &+ (a_2 b_3) x^5 \end{align*}

再引入离散形式卷积（向量卷积）的定义，大家比较一下这个定义和上面多项式的计算。稍微说明一下，中括号的意义是p[n]代表向量第n个元素。将两个多项式的系数写成向量形式然后进行向量卷积，也就是例如p = [a_0, a_1, a_2]，而没定义的地方当作0。可以发现，两者是完全一致的：

\begin{align*} (p * q)[n] &= \sum_{m=-\infty}^\infty p[m]\cdot q[n-m] \\ r[1] &= \sum_{m=0}^1 p[m]\cdot q[1-m] &&= a_0 b_1 + a_1 b_0 \\ r[2] &= \sum_{m=0}^2 p[m]\cdot q[2-m] &&= a_0 b_2 + a_1 b_1 + a_2 b_0 \\ &\cdots \end{align*}

知道了多项式的乘积就是其相应的卷积，我们甚至可以直接得出两个幂级数卷积的结果。因为泰勒级数就是幂级数的一种，所以我们可以将几乎所有的连续函数转换成离散形式，避免了繁复的积分运算：比如我们希望得到 r(x) = p(x) * q(x)，其中p(x) = \sum a_i x^i,\ q(x) = \sum b_i x^i，只需要简单地计算这两个级数的柯西乘积，所得结果就是r(x)的卷积。当然了，这是后话，与本文的主题无关。

卷积与图像处理

在开始讲图像处理之前，我希望先理解一下卷积的整个过程是怎样的。从上面的公式看得还是有点懵懵懂懂，从直觉上去理解一下很有必要。观察卷积的公式以及下面的图片，这个过程可以看作，当你想求一个r[n]的时候：

你先把卷积核q叠在p上面，尽量使左端靠近（如果左对齐就再好不过了），然后看看在[0, n]内p, q重叠的部分是从哪里到哪里，分别写成向量，那么r[n]就等于其中一个向量与另一个向量的逆序的内积。

比如当n = 2时，两个向量是[a_0, a_1, a_2]和[b_2, b_1, b_0]；n = 4时，两个向量是[a_1, a_2, a_3, a_4]和[b_3, b_2, b_1, b_0]。至于求内积，一定难不倒你。下图说明了这一点：

\begin{align*} && a_0 && a_1 && a_2 && a_3 && a_4 \\ && a_0b_0 && a_0b_1 && a_0b_2 && a_0b_3 \\ && && a_1b_0 && a_1b_1 && a_1b_2 && a_1b_3 \\ && && && a_2b_0 && a_2b_1 && a_2b_2 && a_2b_3 \\ && && && && a_3b_0 && a_3b_1 && a_3b_2 && a_3b_3 \\ && && && && && a_4b_0 && a_4b_1 && a_4b_2 && a_4b_3 \\ \hline && c_0 && c_1 && c_2 && c_3 && c_4 && c_5 && c_6 && c_7 \end{align*}

上面是对某一点上卷积的理解。对整个域的卷积，则可以看成是将卷积核（除了开头几个外）不停向右移动，每移动一格就将重叠部分拿出来求内积。

这时我们可以把图像处理和卷积联系起来了。图像处理是，将一副“源图像”（Source），通过一些算法，变成一副“目标图像”（Destination）。当我们进行平滑处理的时候，用到一个叫做滤波器（filter）的 东西，也叫做滤镜。想想我们现实生活中放大镜是怎么用的：拿着放大镜，从报纸的左上角开始，一直扫啊扫到右下角，扫的过程中一直望着放大镜和报纸的重叠区 域（其实就是望着放大镜，因为它比报纸小多了），这样你就浏览完了一张放大过的报纸。平滑滤镜也是同样的使用方法，从源图的左上角开始扫到右下角，扫的过 程中一直取出重叠部分进行内积计算，然后将结果存放到目标图像中 —— 显然这个操作跟卷积是一致的，只不过定义在二维空间内。

为了方便量化表示，我们把图像抽象成定义在R \cap [0, 1] 数环内的二维矩阵，其意义是灰度值，颜色信息我们暂且忽略。卷积核，也就是滤波器同样也是定义在R \cap [0, 1] 内的二维矩阵。这样，二维的卷积我们这样定义它的离散形式：

\text{Dest}[i, j] = \sum_{y=-\infty}^\infty \sum_{x=-\infty}^\infty \text{Src}[y,x] \cdot \text{Ker}[i - y, j - x]

我们的卷积核大小并不是无限的，它一个半径r，这样它的大小就是2r+1。规定了这个r使得，当|x| > r 或 |y| > r，都有Ker[y, x] = 0。规定过大小之后，由 |i-y| < r; |j-x| < r得到 i-r < y < i+r; j-r < x < j+r。同时我们规定Dest和Src的大小是m \times n。于是我们得到了滤波器的算法：

\text{Dest}[i, j] = \sum_{y=\max\{0,i-r\}}^{\min\{i+r,n\}} \left( \sum_{x=\max\{0,j-r\}}^{\min\{j+r,m\}} \text{Src}[y, x] \cdot \text{Ker}[i - y, j - x] \right)

高斯滤波器

二维的高斯函数（俗称避孕套函数）
二维的高斯函数（俗称避孕套函数）

高斯滤波器是最常用的平滑滤波器之一，在Photoshop里面它被用作高斯模糊滤镜。高斯滤波器的定义很经典，就是简单地把正态分布离散开来。二维形式只是单纯把x替代成(x2 + y2)，然后修改系数令实数域上的积分为1：

\begin{align*} \text{Ker}_1[x] &= \frac 1{\sigma\sqrt{2\pi}} e^{-x^2/{\sigma^2}} \\ \text{Ker}_2[i, j] &= \frac 1{2\sigma^2\pi} e^{-(i^2+j^2)/{\sigma^2}} \end{align*}

也许你已经发现了一个这样的规律，这一规律，这在更高维上仍然是满足的，也就是在连续空间里同样满足。这将成为我们优化算法的关键。将这个规律代回到二维离散卷积的公式里，因为y在第二个连加中相当于常数系数可以提出来，我们发现：

\begin{align*} \text{Ker}_2[i, j] &= \text{Ker}_1[i] \cdot \text{Ker}_1[j] \\ \text{Dest}[i, j] &= \sum_{y=-\infty}^\infty \sum_{x=-\infty}^\infty \text{Src}[y,x] \cdot \text{Ker}_2[i - y, j - x] \\ &= \sum_{y=-\infty}^\infty \sum_{x=-\infty}^\infty \text{Src}[y,x] \cdot \text{Ker}_1[i-y] \cdot \text{Ker}_1[j-x]\\ &= \sum_{y=-\infty}^\infty \left( \sum_{x=-\infty}^\infty \text{Src}[y,x] \cdot \text{Ker}_1[j-x]\right) \text{Ker}_1[i-y] \end{align*}

如果x连加所表示是卷积是从右上角开始按照文字书写顺序从左到右，然后从上到下的顺序进行一维卷积，那么y连加表示的卷积就是先从上到下，再从左到有的顺序卷积。在OpenCV提供的数据结构的基础上，不用imgproc提供的算法，我写了一个示例：


 1 // cflags: -lopencv_highgui -lopencv_core
 2 
 3 #include <iostream>
 4 #include <cmath>
 5 #include <opencv2/highgui/highgui.hpp>
 6 
 7 using namespace cv;
 8 using namespace std;
 9 
10 const char* title = "gaussian-filter";
11 
12 Mat kernelMatrix(int radius, double sigma)
13 {
14         int d = radius * 2 + 1;
15         Mat kernel(2, d, CV_64F);
16 
17         double coef = 0;
18         for(int i = 0; i <= radius; i++) {
19                 // f(x) = 1/(sigma * sqrt(2 pi)) * e ^ -x^2/(2 s^2)
20                 int dx = i - radius;
21                 double dx_2 = dx * dx;
22                 double w = pow(M_E, - dx_2 / (2 * sigma * sigma));
23 
24                 coef += w;
25                 kernel.at<double>(0, i) = w;
26                 kernel.at<double>(0, d - i - 1) = w;
27                 // when you used values from i to j (j>i), the sum of them is:
28                 // kernel[1, j] - (i ? kernel[1, i-1] : 0)
29                 kernel.at<double>(1, i) = coef;
30         }
31 
32         for(int i = radius + 1; i < d; i++) {
33                 coef += kernel.at<double>(0, i);
34                 kernel.at<double>(1, i) = coef;
35         }
36 
37         return kernel;
38 }
39 
40 
41 void convolution(const Mat& img, const Mat& kernel, Mat& output, bool t = true)
42 {
43         for(int y = 0, x = 0; y < img.rows; x = (++x<img.cols)? x : (y++, 0)) {
44                 Vec3d r(0, 0, 0);
45 
46                 int ideal = x - int(kernel.cols / 2),
47                     ran_beg = max(ideal, 0) - ideal,
48                     ran_end = min(ideal + kernel.cols, img.cols) - ideal;
49 
50                 for(int i = ran_beg; i < ran_end; i++) {
51                         double weight = kernel.at<double>(0, i);
52                         Vec3b pixel = img.at<Vec3b>(y, ideal + i);
53 
54                         r[0] += pixel[0] * weight;
55                         r[1] += pixel[1] * weight;
56                         r[2] += pixel[2] * weight;
57                 }
58 
59                 double coef = kernel.at<double>(1, ran_end - 1);
60                 if(ran_beg) coef -= kernel.at<double>(1, ran_beg - 1);
61 
62                 output.at<Vec3b>(t?x:y, t?y:x) = Vec3b(
63                         saturate_cast<uchar>(r[0]/coef),
64                         saturate_cast<uchar>(r[1]/coef),
65                         saturate_cast<uchar>(r[2]/coef));
66         }
67 }
68 
69 
70 int main()
71 {
72         namedWindow(title, WINDOW_AUTOSIZE);
73 
74         const int r = 10;
75 
76         Mat img = imread("ai-sample.jpg"),
77             kernel = kernelMatrix(r, (r - 1) * 0.3 + 0.8);
78 
79         Mat product_v = Mat(img.cols, img.rows, img.type());
80         Mat product_h = Mat(img.rows, img.cols, img.type());
81 
82         convolution(img, kernel, product_v);
83         convolution(product_v, kernel, product_h);
84 
85         imshow(title, product_h);
86         for(; waitKey(0) > 0;);
87 
88         destroyWindow(title);
89 }


渲染效果图
渲染效果图


Shihira 2015-08-12 00:35 发表评论
]]>浮点数简介http://www.cppblog.com/Shihira/archive/2015/01/02/209380.htmlShihiraShihiraFri, 02 Jan 2015 06:38:00 GMThttp://www.cppblog.com/Shihira/archive/2015/01/02/209380.htmlhttp://www.cppblog.com/Shihira/comments/209380.htmlhttp://www.cppblog.com/Shihira/archive/2015/01/02/209380.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/209380.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/209380.html

内存中的储存形式(IEEE-745)

Address 3        2        1        0 
Content SEEEEEEE EBBBBBBB BBBBBBBB BBBBBBBB

其中的字母分别代表:

  • S(Significand):1 - 正负号(-1)^S
  • E(Exponent):8 - 指数部分
  • B(Base):23 - 底数部分

这样, 整个浮点数表示起来就是:

(-1)^S \times 1.BBBBBBBBBBBBBBBBBBBBBBB \times 2 ^{EEEEEEEE - 01111111}

N进制的小数

看到10进制的小数, 小数点是用来分隔指数正负位的:

123.456
= 1 \times 10^2 + 2 \times 10^1 + 3 \times 10^0 + 4 \times 10^{-1} + 5 \times 10^{-2} + 6 \times 10^{-3}

推广到N进制, 形式是完全相同的, 这里用二进制做一个例子:

(101.0101)_2
= 2^2 + 2^0 + 2^{-2} + 2^{-4}
= 4+1+{1 \over 4}+{1 \over 16}
= 5.3125

构造一个浮点数

以12.625为例子. 首先我们推算一下它的二进制形式是什么. 如我们所知, 整数部分和小数部分的位置是恒定不变的, 因为它们是否小于1这个性质, 无论在什么进制之下都不会改变. 首先算整数部分:

12 \div 2 = 6 \cdots 0
6 \div 2 = 3 \cdots 0
3 \div 2 = 1 \cdots 1
1 \div 2 = 0 \cdots 1
\therefore \ (12)_10 = (1100)_2

小数部分(不知道是否注意到, 小数部分只有是2^n的和才有可能被表示成不循环小数. 诸如0.7, 0.3都是二进制的无限循环小数):

0.625 \times 2 = 1 + 0.25
0.25 \times 2 = 0 + 0.5
0.5 \times 2 = 1
\therefore \ (0.625)_{10} = (0.101)_2

这样, 我们得到了一个二进位的小数1100.101, 并且化成IEEE-745标准形式:

1100.101 = 1.100101 \times 2^{00000011 + 01111111 - 01111111}

Address 3        2        1        0 
Content SEEEEEEE EBBBBBBB BBBBBBBB BBBBBBBB 
Value   01000001 01001010 00000000 00000000 
Hex           41       4A       00       00

现在我们得到了一个整数0x414A0000, 把它输出出来看看是多少:

$ cat test.c 
#include <stdio.h> 
int main() 
{ 
   union { 
      unsigned long u; 
      float f; 
   } u; 
   u.u = 0x414a0000; 
   printf("%f\n", u.f); 
   return 0;
}

$ ./test 
12.625000
​


Shihira 2015-01-02 14:38 发表评论
]]>TypeGame: 为Vim加上打字练习功能http://www.cppblog.com/Shihira/archive/2014/08/16/typegame-vim.htmlShihiraShihiraSat, 16 Aug 2014 13:11:00 GMThttp://www.cppblog.com/Shihira/archive/2014/08/16/typegame-vim.htmlhttp://www.cppblog.com/Shihira/comments/208039.htmlhttp://www.cppblog.com/Shihira/archive/2014/08/16/typegame-vim.html#Feedback6http://www.cppblog.com/Shihira/comments/commentRss/208039.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/208039.html阅读全文

Shihira 2014-08-16 21:11 发表评论
]]>Windows API 字符编码转换以及一些解释和心得http://www.cppblog.com/Shihira/archive/2013/10/28/200124.htmlShihiraShihiraMon, 28 Oct 2013 14:49:00 GMThttp://www.cppblog.com/Shihira/archive/2013/10/28/200124.htmlhttp://www.cppblog.com/Shihira/comments/200124.htmlhttp://www.cppblog.com/Shihira/archive/2013/10/28/200124.html#Feedback8http://www.cppblog.com/Shihira/comments/commentRss/200124.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/200124.html

我在解决乱码上面实际走了不少弯路，做了很多实验，查了很多资料。在这里做下笔记，希望后来者可以明白，少走些弯路。

从最熟悉的两种字符编码说起

除了一些旧的、没有考虑到兼容性的网页还在用gbk做编码外，大部分的网页都已经用utf-8做编码了。但是最令人头疼的是，windows的控制台是很不好显示utf-8的。有明君为我大C++写了两个函数，是正确的、好用的（除了用std::string做返回值让我等效率党有点觉得不爽之外……还是挺方便的）.

#include <string>
#include <windows.h>
using std::string;

//gbk 转 utf8
string GBKToUTF8(const string& strGBK)
{
    string strOutUTF8 = "";
    WCHAR * str1;
    int n = MultiByteToWideChar(CP_ACP, 0, strGBK.c_str(), -1, NULL, 0);
    str1 = new WCHAR[n];
    MultiByteToWideChar(CP_ACP, 0, strGBK.c_str(), -1, str1, n);
    n = WideCharToMultiByte(CP_UTF8, 0, str1, -1, NULL, 0, NULL, NULL);
    char * str2 = new char[n];
    WideCharToMultiByte(CP_UTF8, 0, str1, -1, str2, n, NULL, NULL);
    strOutUTF8 = str2;
    delete[]str1;
    str1 = NULL;
    delete[]str2;
    str2 = NULL;
    return strOutUTF8;
}

//utf-8 转 gbk
string UTF8ToGBK(const string& strUTF8)
{
    int len = MultiByteToWideChar(CP_UTF8, 0, strUTF8.c_str(), -1, NULL, 0);
    unsigned short * wszGBK = new unsigned short[len + 1];
    memset(wszGBK, 0, len * 2 + 2);
    MultiByteToWideChar(CP_UTF8, 0, (LPCTSTR)strUTF8.c_str(), -1, wszGBK, len);

    len = WideCharToMultiByte(CP_ACP, 0, wszGBK, -1, NULL, 0, NULL, NULL);
    char *szGBK = new char[len + 1];
    memset(szGBK, 0, len + 1);
    WideCharToMultiByte(CP_ACP,0, wszGBK, -1, szGBK, len, NULL, NULL);
    //strUTF8 = szGBK;
    std::string strTemp(szGBK);
    delete[]szGBK;
    delete[]wszGBK;
    return strTemp;
}

这玩意儿不跨平台，因为它用到了windows api。我之所以把它放到跨平台编程上面来，是因为字符编码这东西只有到跨平台的时候才显得坑爹。


接着我是不是要介绍那俩函数一下？

int MultiByteToWideChar(
  _In_       UINT CodePage, /*代码页是Windows下字符编码的叫法，gbk是936，utf-8是65001，CP_ACP是ANSI*/
  _In_       DWORD dwFlags, /*选项标志，转换类型，设0就行了*/
  _In_       LPCSTR lpMultiByteStr, /*多字节字符串*/
  _In_       int cbMultiByte, /*字符串要处理的长度，如果是-1函数就会处理整个字符串*/
  _Out_opt_  LPWSTR lpWideCharStr, /*输出的宽字符串缓存，如果为空就返回需要的宽字符串长度*/
  _In_       int cchWideChar /*宽字符串缓存的长度，当然如果宽字符串为空，这个设0就可以了*/
);

int WideCharToMultiByte(
  _In_       UINT CodePage,
  _In_       DWORD dwFlags,
  _In_       LPCWSTR lpWideCharStr,
  _In_       int cchWideChar,
  _Out_opt_  LPSTR lpMultiByteStr,
  _In_       int cbMultiByte, /*前面的基本与MultiByteToWideChar都相同，就不解释了*/
  _In_opt_   LPCSTR lpDefaultChar, /*填0即可*/
  _Out_opt_  LPBOOL lpUsedDefaultChar /*填0即可*/
);

这两个函数分别是将多字节字符串转换为宽字符字符串 和 将宽字符字符串转换为多字节字符串（在此处晕倒的童鞋们我没有对不起你们……是M$那家伙对不起你们）。我早就说过Windows API 的界面不友好，这么多不知道干嘛吗用的参数，全部填0就对了。要是iconv()，它貌似只有4个参数，这才是好的榜样。


宽字符？多字节？

这是Windows给它们起的名字，让人摸不着头脑。

  • 宽字符：就是Unicode。它雷打不动地用2个字节（0x0000 - 0xFFFF），表示所有我们平常能见到的字符，具体的表格见：http://unicode-table.com

  • 多字节：就是除了Unicode外其他的。我们熟悉的gbk, utf-8, big5，统统归入多字节。

宽字符之所以叫做宽字符，是因为它是一个宽一点的字符。那什么是短字符……就是ascii了，1个字节1个字符绝对够短，而且只能表示256个西欧字符。宽字符呢，是2个字节1个字符。宽一点，但还是可以识别到一个字符是哪里的。而多字节呢，就是它在计算机里表示成多个字节，但是没有办法识别那里到那里是一个字符。

我不喜欢这两个函数的命名。如果按照Python的命名，MultiByteToWideChar 应该叫 decode(解码)，WideCharToMultiByte 应该叫 encode(编码)。


所以呢？

如你所见，多字节无法准确识别字符的长度，处理起来就会很麻烦。而宽字符大多时候虽然比多字节多耗费一点空间，但是处理起来方便。比如正则表达式处理，引擎是基于字符去匹配的，宽字符可以两个字节两个字节跳着匹配，而多字节就会匹配错误。

比如有一个词“程序”=0xB3CCD0F2(gbk)，我想匹配“绦”=0xCCD0(gbk)，正则库会替我把中间那两个字节匹配了。用在C里用wchar_t，C++里用std::wstring，我们可以很准确的，无错误地匹配到我们想要的子串，因为引擎在迭代的时候是逐字（而不是逐字节）进行比较的。

1 >>> str1 = "绦"
2 >>> str2 = "程序"
3 >>> print re.findall(str1, str2)
4 ['\xcc\xd0']
5 >>> print re.findall(str1.decode("gbk"), str2.decode("gbk"))
6 []

所以在处理字符串的时候，但凡要处理中文，要先把用户给的字符串解码成Unicode。处理完之后显示出来或者保存，再编码成需要的charset。


Appendix

在不同的地方用不同的编码：

  • 网络文本（如网页）传输一般用utf-8，因为有少量中文，而大部分是英文。
  • 在保存为本地文件的时候，应该保存为Unicode，因为本地存储资源丰富，且可以节省时间，实时解码毕竟也是O(N^2)啊。
  • 显示出来应该用系统的编码，中文Windows为gbk，繁体Windows为Big5，Linux一律为UTF-8。
  • 源代码里的少量中文串尽量用"\x????\x????"来表示，如果有大量中文建议用gettext或者资源之类的以外挂的方式读入。
  • Qt内部使用Unicode，所以编写Qt应用时显示文字直接传递宽字符串即可。
  • NTFS的文件名、路径都是用GBKUTF16LE编码的，所以如果Windows下用户输入的是路径就无需解码了。




Shihira 2013-10-28 22:49 发表评论
]]>AGG入门（八） - 渲染http://www.cppblog.com/Shihira/archive/2012/08/01/185867.htmlShihiraShihiraWed, 01 Aug 2012 12:01:00 GMThttp://www.cppblog.com/Shihira/archive/2012/08/01/185867.htmlhttp://www.cppblog.com/Shihira/comments/185867.htmlhttp://www.cppblog.com/Shihira/archive/2012/08/01/185867.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/185867.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/185867.html一、引言
让我们来看一看渲染具体的流程图吧：

上面提到了几个概念，再解释一下：
  • 顶点源（Vertex Source）：用顶点的方式描述矢量图形；
  • 光栅化（Resterizer）：它的作用是把顶点源所描绘的图形与像素对应起来，可以说类似于Photoshop上的矢量蒙版；
  • 扫描线（Scanline）：扫描线的作用就是为扫描线渲染器提供一个扫描的方式和区域，使渲染器有序地填充；
  • 扫描线渲染器（Scanline Renderer）：分实色和自定义渲染器两类，实色只允许你用单一的颜色去进行渲染，而自定则可做得多姿多彩，比如渐变、位图；它相当于GDI里的画刷。

二、工作

这次我们以一个自制的顶点源与椭圆组合作为渲染对象，用宝蓝色的实色渲染器进行渲染；

#include <agg_ellipse.h>

//................

class triangle_path {
public:
    triangle_path()
    {
        unsigned tmp_array[4][3]={
            {0  , 250, agg::path_cmd_move_to},
            {500, 250, agg::path_cmd_line_to},
            {250, 500, agg::path_cmd_line_to},
            {0  ,   0, agg::path_cmd_stop}
        };
        memcpy(m_points[0], tmp_array[0], sizeof(m_points));
    }
    unsigned vertex(double *x, double* y)
    {
        *x = m_points[m_step][0];
        *y = m_points[m_step][1];
        unsigned r = m_points[m_step][2];
        m_step++;
        return r;
    }
    void rewind(int)
    {
        m_step = 0;
    }
private:
    int m_step;
    unsigned m_points[4][3];
};

//...... in class the_application

    void on_draw()
   {
        ren_bas.reset_clipping(true);
        ren_bas.clear(agg::rgba8(255, 255, 255));
 
        agg::ellipse ellipse(250, 125, 125, 125);
        triangle_path triangle;
        rasterizer.reset();
        rasterizer.add_path(triangle);
        rasterizer.add_path(ellipse);
        agg::render_scanlines_aa_solid(rasterizer, scanline, ren_bas,
            agg::rgba8(45, 108, 155));  //注意：函数名中的scanline是复数！！
    }

三、解释

先看on_draw函数：我们先定义了两个顶点源，一个是椭圆，另一个是自制的三角形；先把rasterizer重置，清除上次重绘留下的光栅信息；我们再在光栅中添加这两个顶点源，用渲染器渲染，就是了；
你可能感到奇怪：为什么没有扫描线渲染器的定义呢？其实在render_scanlines_aa_solid里，就已经帮你定义好了实色渲染器。把render_scanlines_aa_solid展开成：
agg::renderer_scanline_aa_solid<agg::renderer_base<agg::pixfmt_rgb24>> renderer_scanline(ren_bas);
renderer_scanline.color(agg::rgba8(45, 108, 155, cover));
agg::render_scanlines(rasterizer, scanlines, renderer_scanline);
效率是一样的，只不过函数版本更加简洁。
顶点源的定义，结合上一节的知识和agg_basics.h中关于path_commands_e和path_flags_e的定义，应该是可以理解的；


Shihira 2012-08-01 20:01 发表评论
]]>AGG入门（七） - 顶点源http://www.cppblog.com/Shihira/archive/2012/07/24/183919.htmlShihiraShihiraTue, 24 Jul 2012 08:30:00 GMThttp://www.cppblog.com/Shihira/archive/2012/07/24/183919.htmlhttp://www.cppblog.com/Shihira/comments/183919.htmlhttp://www.cppblog.com/Shihira/archive/2012/07/24/183919.html#Feedback4http://www.cppblog.com/Shihira/comments/commentRss/183919.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/183919.html一、修改模板
现在终于进入了真正的矢量绘图阶段，我们的模版也需要有所改变；至于为什么，有什么作用，以后会说到；
包含下面的头文件，并且在the_application类中添加两个成员。
//扫描线和扫描线光栅器
#include <agg_scanline_u.h>
#include <agg_rasterizer_scanline_aa.h>

private:
    //扫描线和扫描线光栅器
    agg::scanline_u8 scanline;
    agg::rasterizer_scanline_aa<> rasterizer;


 二、顶点源

 

顶点源（Vertex Source）不是一个类，而是一种类的模式。这种类里面有rewind()函数和vertex()函数给AGG内部调用（没错，这就是它的定义）。类如其名，顶点源就是为绘图系统提供顶点信息的，大家能想象得出这两个函数的作用了吗？
rewind()：回到最开始个步骤；
vertex(double* x, double* y)：每调用一次，跳一个步骤（点），每一个步骤都输出顶点的x,y坐标（灰色字），以及这个坐标的绘图命令（紫色字）；

三、内置顶点源

AGG内置了大量的顶点源，我们可以直接调用，他们包括：
agg::path_storage
agg::arc
agg::rounded_rect
agg::ellipse
agg::curve3
agg::curve4 ......
等等，为什么没有线、点顶点源？其实，path_storage已经内置了画线函数、画弧函数、画贝塞尔曲线函数，你可以用path_storage创造几乎任何的图形。至于画点，copy_pixel()或者用椭圆吧……

四、路径储存器

Path storage 是用来管理路径、画复杂图形的。在上面可以任意添加直线、曲线、其他路径。

头文件

#include <agg_path_storage.h>

类型定义

typedef path_base<vertex_block_storage<double> > path_storage;

基本成员函数

  • move_to()
        添加命令为 path_cmd_move_to 的顶点，意为下一条线从这个点开始画；
  • line_to()
        添加命令为 path_cmd_line_to 的顶点，意为画线到这个点；
  • arc_to(double rx, double ry, double angle, bool large_arc_flag, bool sweep_flag, double x, double y)
        添加一条弧路径，画轴长为rx, ry，角度为angle，优/劣弧，顺逆时针，终点在(x,y)。
  • curve3_to()
        添加贝塞尔曲线，参数为一个控制点和终点的坐标
  • curve4_to()
        添加贝塞尔曲线，参数为两个控制点和终点的坐标
  • join_path()
        添加一个顶点源，即组合
  • vertex(unsigned idx, double* x, double* y)
    last_vertex(double* x, double* y)
    vertex(double* x, double* y)
        取顶点位置，前者为已知步骤，后两者为顺序或倒序获取
  • modify_vertex()
    modify_command()
        修改步骤为idx的顶点坐标和命令

五、其他顶点源

其他顶点源就不一一介绍了，只列出其头文件和构造函数：
  • #include <agg_ellipse.h>
    ellipse(double x, double y, double rx, double ry, unsigned num_steps=0, bool cw=false)
        圆心(x, y)和长短半轴分别为rx, ry，步骤数位num_steps（无用），cw决定相交地方是否空出
  • #include <agg_arc.h>
    arc(double x,  double y, double rx, double ry, double a1, double a2, bool ccw=true)
        圆心为(x, y)和长短半轴分别为rx, ry，初始角度和终结角度为a1, a2
  • #include <agg_curves.h>
    curve3(double x1, double y1, double x2, double y2, double x3, double y3)
        三个点，分别为：初始点，控制点一，终结点
  • #include <agg_curves.h>
    curve4(double x1, double y1, double x2, double y2, double x3, double y3, double x4, double y4)
        四个点，分别为：初始点，控制点一，控制点二，终结点
  • #include <agg_rounded_rect.h>
    rounded_rect(double x1, double y1, double x2, double r)
        对角点的坐标和圆角半径

至于怎样把他们画在渲染内存上呢，我们下一篇会讲到。
头文件也渐渐地多了起来，包含头文件时的工作量有点大；我特地列了一个头文件，里面已经包含了所有的AGG头文件，以后大家只需要包含它就好了。
下载处：http://www.cppblog.com/Files/Shihira/agg.h.zip



Shihira 2012-07-24 16:30 发表评论
]]>AGG入门（六） - 练习和细节http://www.cppblog.com/Shihira/archive/2012/07/24/183618.htmlShihiraShihiraTue, 24 Jul 2012 08:30:00 GMThttp://www.cppblog.com/Shihira/archive/2012/07/24/183618.htmlhttp://www.cppblog.com/Shihira/comments/183618.htmlhttp://www.cppblog.com/Shihira/archive/2012/07/24/183618.html#Feedback1http://www.cppblog.com/Shihira/comments/commentRss/183618.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/183618.html学到目前为止，已经认识了六个类型：
  • platform_support
  • rendering_buffer
  • rgba8
  • pixfmt_rgb24
  • rect_i
  • renderer_base
现在来做些练习，看看有没有掌握学过的东西，并且灵活运用吧。

一、基本框架

这一节的程序都以这个框架为基础，都是在on_draw中稍微改动的：
#include <agg_pixfmt_rgb.h>
#include <agg_renderer_base.h>
#include <platform/agg_platform_support.h>

class the_application : public agg::platform_support
{
public:
    the_application(agg::pix_format_e format, bool flip_y) : 
        agg::platform_support(format, flip_y),
        pix_fmt(rbuf_window()),
        ren_bas(pix_fmt) //初始化渲染器
    { }
    
    virtual void on_draw()
    {
         ren_bas.reset_clipping(true);
         ren_bas.clear(agg::rgba8(255, 255, 255));
    }
private:
    agg::pixfmt_rgb24 pix_fmt;
    agg::renderer_base<agg::pixfmt_rgb24> ren_bas;

};

int agg_main(int argc, char* argv[])
{
    the_application app(agg::pix_format_bgr24, true);
    app.caption("AGG Test");
    
    if(app.init(500, 500, agg::window_resize)) {
        return app.run();
    }
    return -1;
}

二、画线函数

编写如下函数，实现在渲染缓存中画线的功能（无需反锯齿）：
    inline void stroke_line(int x1, int y1, int x2, int y2, agg::rgba8& color);
参数：

  • x1, y1, x2, y2分别是两个端点的坐标；
  • color是颜色；

 

三、画圆函数

编写如下函数，实现在渲染缓存中画圆的功能（无需反锯齿）：
    void stroke_round(int r, int C_x, int C_y, agg::rgba8& color, float step = 0.01)
参数：

  • C_x, C_y 是圆心的坐标；
  • color是颜色；
  • step是步长，也就是吧圆细分成1/step边形；

 

四、答案

  • 画线函数
    inline void stroke_line(int x1, int y1, int x2, int y2, agg::rgba8& color)
    {
        double precision = max(abs(x1 - x2), abs(y1 - y2));
        //精度，也就是画多少个点

        for(int i=0; i <= precision; i++)
            ren_bas.copy_pixel( x1 + ( x2 - x1 ) / precision * i, //x
                y1 + ( y2 - y1 ) / precision * i, //y
                color);
    }
  • 画圆函数
    void stroke_round(int r, int C_x, int C_y, agg::rgba8& color, float step = 0.01)
    {
        int prev_x = int(r * cos(-0.01)) + C_x,
            prev_y = int(r * sin(-0.01)) + C_y; //保存上一个点

        int x, y; //保存当前的点
        for(double rad = 0; rad < 2 * PI + step; rad+= step) {
            x = int(r * cos(rad)) + C_x;
            y = int(r * sin(rad)) + C_y; //计算弧度为rad时的坐标
            stroke_line(x, y, prev_x, prev_y, color);
            prev_x = x; prev_y = y;
        }
    }

可能有的人会觉得奇怪的是，为什么在画线函数中，不用pix_fmt.copy_pixel()而用ren_bas.copy_pixel()呢？因为，在pix_fmt中，混合器不进行检查，像素拷贝的时候会拷贝到剪裁区域以外，这样会造成很奇怪的情况，以至于如果写到了缓存以外，还会出现异常。注意，剪裁盒功能是基础渲染器级别才提供的，更加底层的操作，比如像素格式混合和直接操作缓存，高层次的渲染器是无从管理的。为了安全起见，建议少碰基础渲染器以下的工具……



Shihira 2012-07-24 16:30 发表评论
]]>AGG入门（五） - 基础渲染器http://www.cppblog.com/Shihira/archive/2012/07/24/183556.htmlShihiraShihiraTue, 24 Jul 2012 08:29:00 GMThttp://www.cppblog.com/Shihira/archive/2012/07/24/183556.htmlhttp://www.cppblog.com/Shihira/comments/183556.htmlhttp://www.cppblog.com/Shihira/archive/2012/07/24/183556.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/183556.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/183556.html基础渲染器（Base Renderer）是扫描线渲染器的基础，可以说，正常情况下，你绘画任何图形、做任何事，都需要通过它。而基础渲染器需要你以模版的形式提供像素格式的信息，他将会通过像素格式混合器来实现渲染。其实，基础渲染器比像素格式混合器多了剪裁盒的功能，其他混合、拷贝什么的和像素格式混合器是相似的，这里就不列出来了。

矩形类

AGG封装了一个专门表示矩形的模板类rect_base，方便矩形的操作。下面用rect_i说明一下。        

头文件

#include "agg_basics.h"

类型定义

typedef rect_base<int> rect_i;

基本成员函数

  • rect_i(x1, y1, x2, y2)
            构造函数，给出最小和最大坐标；
  • normalize()
            修正x1>x2或y1>y2的不合法矩形；
  • clip(rect_i& r)
            取当前矩形与r相交的区域矩形作为当前矩形；
  • is_valid()
            检查矩形是否合法；
  • hit_test(int x, int y)
            检查(x, y)是否在矩形内；

基础渲染器

头文件

#include "agg_renderer_base"

类型定义

template<class PixelFormat> class renderer_base

基本成员函数

  • renderer_base(PixelFormat)
            构造函数，提供像素格式；
  • ren()
            返回像素格式对象；
  • clip_box(x1,y1,x2,y2)
    clip_box_naked(x1,y1,x2,y2)
            设置当前剪裁盒为x1,y1,x2,y2围成的剪裁盒，前者检查剪裁盒是否合法，后者不检查。
  • reset_clipping(bool visibility)
            重置剪裁盒，visibility决定剪裁盒是铺满窗口（可视）还是0（不可视）；
  • clip_box()
    xmin()
    ymin()
    xmax()
    ymax()
            返回当前剪裁盒矩形、以及纵横坐标；
  • copy_from()
    blend_from()
            可以比较方便地、以矩形方式拷贝和混合缓存里的图像了；


Shihira 2012-07-24 16:29 发表评论
]]>AGG入门（四） - 渲染缓存和混合器http://www.cppblog.com/Shihira/archive/2012/07/24/183204.htmlShihiraShihiraTue, 24 Jul 2012 08:29:00 GMThttp://www.cppblog.com/Shihira/archive/2012/07/24/183204.htmlhttp://www.cppblog.com/Shihira/comments/183204.htmlhttp://www.cppblog.com/Shihira/archive/2012/07/24/183204.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/183204.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/183204.html一、上一节的代码
        agg::rendering_buffer &rbuf = rbuf_window();
        agg::pixfmt_rgb24 pixf(rbuf);

        agg::renderer_base<agg::pixfmt_rgb24> renb(pixf);
        renb.clear(agg::rgba8(255, 255, 255));

        pixf.copy_pixel(20, 20, agg::rgba8(0, 0, 255));

二、渲染缓存

渲染缓存保存着一个个像素，作为AGG的画布。它仅仅是一个内存块，用来储存像素信息，不提供任何绘图功能，只允许你读取和修改里面的数据。它也不告诉你里面的像素是灰度的、RGB的还是RGBA的，不告诉你从哪里到哪里是一个像素——它只是用来管理内存数据的。

头文件

#include "platform/agg_platform_support.h"

类型定义

typedef row_accessor<int8u> rendering_buffer //int8u是8 bit无符号整形

基本成员函数

  • rendering_buffer(int8u* buf, unsigned width, unsigned height, int stride) 
            构造函数，指定事先分配好的内存块（到时就画到上面）首地址、宽高、一行的字节数（默认全部都是0）；
  • row_ptr(int y)
            返回第y行的首地址；
  • copy_from(void *buf)
            从buf中拷贝像素；
  • clear(int8u value)
            用value清空缓存
  • buf(), height(), weight(), stride()
            返回缓存首地址、宽高、一行的字节数；
注：代码中的rbuf_window()是platform_support的一个成员函数，用于返回platform_support一开始帮你申请的缓存引用。

三、混合器

混合器的存在是为了适应不同平台、不同需求下的不同像素格式。混合器有三种：agg::rgba，agg::rgba8和agg::rgba16，都是用来指定颜色的，rgba每个通道储存为double，rgba8为unsigned char，rgba16为int或long int；混合器起到的作用就像Win32API里的RGB和COLORREF宏。

头文件

#include "agg_pixfmt_rgba.h"

类型定义

struct rgba8; //对，你没有看错，是结构，不是类……

基本成员函数

  • rgba8(unsigned r, unsigned g, unsigned b, unsigned a)
            无须解释了吧，最大255；
  • clear(), no_color()
            四个通道全部清零，也就是变没色咯；
  • transparent()
            alpha清零，变透明；
  • opacity()
            返回透明度，用double表示；
  • gradient(agg::rgba8 &c, double k)
            颜色梯度，就是颜色变为从原先的颜色渐变为c，变化率为k；
  • add(agg::rgba8 &c, unsinged cover)
            颜色叠加，叠加一个透明度为cover/255的颜色c；

成员变量

  • r, g, b, a都是无符号整型；

四、像素格式混合器


像素格式混合器的作用是直接操作像素（也就是缓存里保存的数据，但起码有个像素的样子），起到Win32API里的SetPixel()和GetPixel()的作用。像素格式由两个属性决定：混合器类型【agg::rgba8/agg::rgba16】、bgr/rgb/rgba/abgr顺序【agg::order_bgr/agg::order_rgb/agg::order_rgba/agg::order_abgr】——这样，共8种像素格式，它们起名字的规则就是：
agg::pixfmt_[order][bits*3];
下面用最常用的agg::pixfmt_rgb24来解释：

头文件

#include "agg_pixfmt_rgb.h"

类型定义

typedef pixfmt_alpha_blend_rgb<blender_rgb<rgba8,  order_rgb>, rendering_buffer> pixfmt_rgb24;

基本成员函数

  • pixfmt_rgb24(agg::rendering_buffer &) 
            构造函数，指定缓存就好；
  • blend_pixel(agg::rgba8& c, int x, int y, int8u cover)
            用颜色c以cover（覆盖率=透明度）的透明度混合像素(x, y)；
  • copy_pixel(agg::rgba8& c, int x, int y)，pixel(int x, int y)
            这个就是相当于SetPixel()和GetPixel()了；
  • copy_hline(int x, int y, unsigned len, agg::rgba8& c)
    copy_vline(int x, int y, unsigned len, agg::rgba8& c)  
            从(x, y)开始打横（竖）顺序设置len长度的像素；
  • blend_hline(int x, int y， unsigned len, agg::rgba8& c, int8u cover)
    blend_vline(int x, int y， unsigned len, agg::rgba8& c, int8u cover) 
            从(x, y)开始打横（竖）顺序混合len长度的像素；
  • copy_solid_hspan(int x, int y， unsigned len, agg::rgba8* colors)
    copy_solid_vspan(int x, int y， unsigned len, agg::rgba8* colors)
    blend_solid_hspan(int x, int y， unsigned len, agg::rgba8* colors, int8u* cover, int8u cover)
    blend_solid_vspan(int x, int y， unsigned len, agg::rgba8* colors, int8u* cover, int8u cover)
            同上两个，不过不是一个颜色，是一系列的颜色；
  • for_each_pixel(void (*f)(agg::rgba8* color))
            每一像素执行一遍f；
  • copy_from(agg::rendering_buffer & from, int xdst, int ydst, int xsrc, int ysrc, unsigned len)
    blend_from(agg::rendering_buffer & from, int xdst, int ydst, int xsrc, int ysrc, unsigned len[, unsigned cover])  
            从缓存form中(xsrc, ysrc)顺序复制（混合）到当前缓存的(xdst, ydst)中；
【其他函数和像素格式就要靠大家的举一反三，触类旁通了……】

五、结语

上面说的三者关系是：混合器混合RGBA四个通道，像素格式混合器混合像素，像素格式混合器操作的结果是使渲染缓存里的数据发生变化，而混合器则不会，因为它的作用仅仅是表示颜色。


Shihira 2012-07-24 16:29 发表评论
]]>AGG入门（三） - 渲染器介绍http://www.cppblog.com/Shihira/archive/2012/07/24/183117.htmlShihiraShihiraTue, 24 Jul 2012 08:28:00 GMThttp://www.cppblog.com/Shihira/archive/2012/07/24/183117.htmlhttp://www.cppblog.com/Shihira/comments/183117.htmlhttp://www.cppblog.com/Shihira/archive/2012/07/24/183117.html#Feedback0http://www.cppblog.com/Shihira/comments/commentRss/183117.htmlhttp://www.cppblog.com/Shihira/services/trackbacks/183117.html一、看回AGG入门（二）时on_draw()虚函数里的代码：
        agg::rendering_buffer &rbuf = rbuf_window();
        agg::pixfmt_rgb24 pixf(rbuf);

        agg::renderer_base<agg::pixfmt_rgb24> renb(pixf);
        renb.clear(agg::rgba8(255, 255, 255));

        pixf.copy_pixel(20, 20, agg::rgba8(0, 0, 255));

二、渲染器

什么是渲染？

渲染是把内存中的绘图指令真正执行的过程。比如说，绘制一条线段，在内存里只会保存着两个端点的坐标和线段的宽度，而渲染就把这两个端点转换为位图、缓存甚至显示屏上的一个个像素的数据。又比如说，纸飞机下面肯定是要有投影的了，但这个投影的质量，就由渲染器决定；线段是走样的（A），还是反走样的（B），靠的就是渲染器的指令了。

AGG里的渲染器

AGG分有多种渲染器。在AGG中，渲染器负责表现扫描线中的每个线段。在渲染器之前，AGG图形中的线段是没有颜色值的，只是位置、长度和 覆盖率（透明度）。渲染器赋于线段色彩，最终成为一幅完整的图像。其中最常用的是：
  • 像素格式渲染器
  • 基础渲染器
  • 扫描线（反锯齿）渲染器

三、三种渲染器间的关系

  • 像素格式渲染器（PixelFormat Renderer）是最基础的渲染器，不需要任何其他渲染器的支持，所以可以直接声明；
  • 基础渲染器（Base Renderer）是中级渲染器，需要像素格式作为模版和像素格式渲染器的支持;
  • 扫描线渲染器（Scanline Renderer）是高级渲染器，需要基础渲染器作为模版和支持;
（注：模版主要是为了获取像素格式的信息）
所以，除像素格式渲染器声明为：
agg::class object(agg::rendering_buffer &);
之外其他的渲染器都声明为：
agg::class<template> object(template &);


Shihira 2012-07-24 16:28 发表评论
]]>