本节中,我们会绘制一些基本的图元。我们会绘制简单的线,填充图形,描边,还会涉及到点画线,线的端点形状,线的连接等。
线:
线是一种最基本的几何体。我们可以通过调用两个函数实现的线的绘制。通过调用cairo_move_to()函数,可以给一个开始点,然后通过cairo_line_to()画出一条直线。
在这个例子里,我们随机在窗口上单击左键。每个点击的点会记录到一个数组里面。当我们点击右键时,每个点就会连接到其它的所有点上。这样,我们就创建了几个相交的物体。再次点击右键,会清空窗体,然后可以开始另外一个物体的绘制。
这些线段会用黑色,0.5个像素进行绘制。
连接一个点到所有的其它点。
调用cairo_stroke()绘制线条。
设置鼠标点击的回调函数
在回调函数里面,我们要进行判断现在点的是左键还是右键。如果是左键,就保存现在点击的位置的x,y值到数组里面。
如果是右键,就重画整个窗口。
填充和描边
stroke操作可以画一个形状的外边。填充操作可以填充形状的里面。
在这个例子里,我们画了一个圆,然后用指定的颜色进行填充。
#include <math.h>
这个头文件里定义了我们需要的M_PI常量
在这里,我们得到了窗口的宽和高。我们需要这两个值去画圆。当我们重新设置窗口大小时,圆也会重画。
这里画的是外面的线。
这里是画一个蓝色的实心圆。
点划线
每条线都可以用不同画线方式。它们定义了线的类型。点划模式主要是在调用cairo_stroke()函数时起作用。点划模式可以用cairo_sete_dash()函数设置。这个模式可以用正数数组来定义。它们控制点划线的连接和断开。我们要定义这个数组的长度和偏移。如果长度是0,点划模式就会禁用。如果长度是1,点划模式就会是一个对称的样式。偏移定义了点划的开始。如果是其它值,开始位置就是一个空白。
本例子里,我们用不同的点划模式,画了三条线段。
这个点划方式是:画四个像素的线,然后是一个空点。
得到这个数组的长度
设置这个点划模式。
这个例子里,我们创建了一个画图区域,而不是直接画在了窗口上面。
线的端点类型
线的端点是一个线段的终点。
有三种类型:
CAIRO_LINE_CAP_SQUARE
CAIRO_LINE_CAP_ROUND
CAIRO_LINE_CAP_BUTT
用CAIRO_LINE_CAP_SQUARE类型的线和CAIRO_LINE_CAP_BUTT类型的线,长度上会有区别。CAIRO_LINE_CAP_SQUARE类型的线会比CAIRO_LINE_CAP_BUTT类型的线在开始和结束处长width/2个像素。
本例子中,我们画了三个不同端点类型的线条。它们很生动的显示了三种线条的区别。
设置线宽为10个像素。
画了一个CAIRO_LINE_CAP_ROUND类型的线条。
这是用来比较三种类型端点线条不同的三条竖线中的一条。
线条的连接方式也有三种类型:
CAIRO_LINE_JOIN_MITER
CAIRO_LINE_JOIN_BEVEL
CAIRO_LINE_JOIN_ROUND
这个例子中,我们画了三个使用不同连接方式的矩形。
这段代码,我们画了一个连接方式为CAIRO_LINE_JOIN_MITER的矩形。线宽为14px。
原始地址:http://zetcode.com/tutorials/cairographicstutorial/basicdrawing/