用开罗图形绘制多个矩形

我想写一个开罗程序来黑色填充整个图像，然后在里面绘制另一个矩形的另一种颜色。最终，我将使这个程序生成当前时间的.png，看起来像数字时钟。现在，这是我挂断的地方。用开罗图形绘制多个矩形

这里是我的代码：

#include <stdio.h> 
#include <cairo.h> 

//on color: 0.6, 1.0, 0 
//off color: 0.2, 0.4, 0 

int prop_number_width; 
int prop_number_height; 

int prop_width; 
int prop_height; 
int prop_space_width; 
int prop_space_height; 

double width; 
double height; 

double w_unit; 
double h_unit; 

void draw_number(cairo_t* cr, int unit_width, int num); 

int main(int argc, char** argv) { 
    /* proportional sizes: 
    * the widths and heights of the diagram 
    */ 
    prop_number_width = 5; //how many spaces the number takes up 
    prop_number_height = 6; 

    prop_space_width = 1; //extra width on each side 
    prop_space_height = 1; //extra height on each side 
    prop_width = 25 + (2 * prop_space_width); //width of diagram 
    prop_height = 6 + (2 * prop_space_height); //height of diagram 

    /* actual sizes: 
    * the pixel value of different sizes 
    */ 
    width = 200.0; 
    height = 100.0; 

    w_unit = width/prop_width; 
    h_unit = height/prop_height; 

    //begin cairo stuff 
    cairo_surface_t* surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, (int)width, (int)height); 
    cairo_t* cr = cairo_create(surface); 

    //black fill 
    cairo_set_source_rgb(cr, 0.0, 0.0, 0.0); 
    cairo_rectangle(cr, 0.0, 0.0, width, height); //cr ref, x, y, width, height 
    cairo_fill_preserve(cr); 

    //draw numbers from left to right 
    draw_number(cr, 0, 1); 
    //draw_number(cr, 6, 3); 
    //draw_number(cr, 14, 3); 
    //draw_number(cr, 20, 7); 

    //draw in colons 

    cairo_destroy(cr); 
    cairo_surface_write_to_png(surface, "test.png"); 
    cairo_surface_destroy(surface); 
    return 0; 
} 

void draw_number(cairo_t* cr, int unit_width, int num) { 
    //determine the box size that the number will be drawn in 
    double box_x = w_unit * (prop_space_width + unit_width); 
    double box_y = h_unit * prop_space_height; 
    double box_width = w_unit * prop_number_width; 
    double box_height = h_unit * prop_number_height; 

    printf("{box_x: %lf box_y: %lf} {box_width: %lf box_height: %lf}\n", box_x, box_y, box_width, box_height); 
    cairo_set_source_rgb(cr, 0.2, 0.4, 0); 
    cairo_rectangle(cr, box_x, box_y, box_width, box_height); 
    cairo_fill_preserve(cr); 
}

问题是与此代码它绘制矩形以占据整个图像，其中从printf的的它应该只占用一小部分。有人知道如何让这个矩形显示为正确的大小吗？

来源

2010-08-01 SummerCodin