# JavaScript GTK 中的 Cario 绘图

> 原文： [http://zetcode.com/gui/javascriptgtktutorial/cairo/](http://zetcode.com/gui/javascriptgtktutorial/cairo/)

在 JavaScript GTK 教程的这一部分中，我们将使用 Cairo 库进行一些绘图。 目前，Seed 仅支持 Cario 库的一小部分。

Cairo 是用于创建 2D 矢量图形的库。 我们可以使用它来绘制自己的小部件，图表或各种效果或动画。

## 色彩

在第一个示例中，我们将处理颜色。 颜色是代表红色，绿色和蓝色（RGB）强度值的组合的对象。 Cario 有效 RGB 值在 0 到 1 的范围内。

```js
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

In this program, we will draw three
colored rectangles on the drawing area
using Cairo

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       

        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(360, 100);
            w.set_title("Colors");
            w.set_position(Gtk.WindowPosition.CENTER);           

            var darea = new Gtk.DrawingArea();

            darea.signal.expose_event.connect(on_expose);

            w.add(darea);          
            w.show_all(); 
        }

        function on_expose(darea) {

            print(darea);

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_colors(cr);
        }

        function draw_colors(cr) {

            cr.set_source_rgb(0.2, 0.23, 0.9);
            cr.rectangle(10, 15, 90, 60);
            cr.fill();

            cr.set_source_rgb(0.9, 0.1, 0.1);
            cr.rectangle(130, 15, 90, 60);
            cr.fill();

            cr.set_source_rgb(0.4, 0.9, 0.4);
            cr.rectangle(250, 15, 90, 60);
            cr.fill();            
        }        
    }              
});

var window = new Example();
Gtk.main();

```

在我们的示例中，我们将绘制三个矩形，并用三种不同的颜色填充它们。

```js
var darea = new Gtk.DrawingArea();

```

我们将在`DrawingArea`小部件上进行绘制操作。

```js
darea.signal.expose_event.connect(on_expose);

```

当需要重绘窗口时，将触发`expose_event`。 为响应此事件，我们调用`on_expose()`方法。

```js
var cr = new cairo.Context.from_drawable(darea.window);

```

我们从绘图区域的`GdkWindow`创建 cairo 上下文对象。 上下文是我们绘制所有图纸的对象。

```js
draw_colors(cr);

```

实际图形委托给`draw_colors()`方法。

```js
cr.set_source_rgb(0.2, 0.23, 0.9);

```

`set_source_rgb()`方法为 Cario 上下文设置颜色。 该方法的三个参数是颜色强度值。

```js
cr.rectangle(10, 15, 90, 60);

```

我们画一个矩形。 前两个参数是矩形左上角的 x，y 坐标。 最后两个参数是矩形的宽度和高度。

```js
cr.fill();

```

我们用当前颜色填充矩形的内部。

![Colors](img/c57d9c7ce1d9a3775a7d4dd53e315a97.jpg)

图：颜色

## 基本形状

下一个示例将一些基本形状绘制到窗口上。

```js
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This code example draws basic shapes
with the Cairo library

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       

        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(390, 240);
            w.set_title("Basic shapes");
            w.set_position(Gtk.WindowPosition.CENTER);           

            var darea = new Gtk.DrawingArea();

            darea.signal.expose_event.connect(on_expose);

            w.add(darea);          
            w.show_all(); 
        }

        function on_expose(darea) {

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_colors(cr);
        }

        function draw_colors(cr) {

            cr.set_source_rgb(0.6, 0.6, 0.6);

            cr.rectangle(20, 20, 120, 80);
            cr.rectangle(180, 20, 80, 80);
            cr.fill();

            cr.arc(330, 60, 40, 0, 2*Math.PI);
            cr.fill();

            cr.arc(90, 160, 40, Math.PI/4, Math.PI);
            cr.fill();

            cr.translate(220, 180);
            cr.scale(1, 0.7);
            cr.arc(0, 0, 50, 0, 2*Math.PI);
            cr.fill();
        }        
    }              
});

var window = new Example();
Gtk.main();

```

在此示例中，我们将创建一个矩形，一个正方形，一个圆形，一个弧形和一个椭圆形。 我们用蓝色绘制轮廓，内部用白色绘制。

```js
cr.rectangle(20, 20, 120, 80);
cr.rectangle(180, 20, 80, 80);
cr.fill();

```

这些线绘制一个矩形和一个正方形。

```js
cr.arc(330, 60, 40, 0, 2*Math.PI);
cr.fill();

```

此处`arc()`方法绘制一个完整的圆。

```js
cr.translate(220, 180);
cr.scale(1, 0.7);
cr.arc(0, 0, 50, 0, 2*Math.PI);
cr.fill();

```

`translate()`方法将对象移动到特定点。 如果要绘制椭圆形，请先进行一些缩放。 在这里`scale()`方法缩小 y 轴。

![Basic shapes](img/efaab5c418788d62cb58518be11a3ce5.jpg)

图：基本形状

## 透明矩形

透明性是指能够透视材料的质量。 了解透明度的最简单方法是想象一块玻璃或水。 从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。

在计算机图形学中，我们可以使用 alpha 合成来实现透明效果。 Alpha 合成是将图像与背景组合以创建部分透明外观的过程。 合成过程使用 Alpha 通道。 （wikipedia.org，answers.com）

```js
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program shows transparent
rectangles using Cairo

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
cairo = imports.cairo;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       

        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(590, 90);
            w.set_title("Transparent rectangles");
            w.set_position(Gtk.WindowPosition.CENTER);           

            var darea = new Gtk.DrawingArea();

            darea.signal.expose_event.connect(on_expose);

            w.add(darea);          
            w.show_all(); 
        }

        function on_expose(darea) {         

            var cr = new cairo.Context.from_drawable(darea.window);
            draw_rectangles(cr);
        }

        function draw_rectangles(cr) {

            for (var i=1; i<=10; i++) {
                cr.set_source_rgba(0, 0, 1, i*0.1);
                cr.rectangle(50*i, 20, 40, 40);
                cr.fill();
            }
        }                        
    }              
});

var window = new Example();
Gtk.main();

```

在示例中，我们将绘制十个具有不同透明度级别的矩形。

```js
cr.set_source_rgba(0, 0, 1, i*0.1);

```

`set_source_rgba()`方法的最后一个参数是 alpha 透明度。

![Transparent rectangles](img/fcf3d5dc2adc36794a324169e5fb612f.jpg)

图：透明矩形

在 JavaScript GTK 教程的这一章中，我们使用 Cairo 库进行绘图。