# 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(); ``` 我们用当前颜色填充矩形的内部。  图：颜色 ## 基本形状 下一个示例将一些基本形状绘制到窗口上。 ```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 轴。  图：基本形状 ## 透明矩形 透明性是指能够透视材料的质量。 了解透明度的最简单方法是想象一块玻璃或水。 从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。 在计算机图形学中，我们可以使用 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 透明度。  图：透明矩形 在 JavaScript GTK 教程的这一章中，我们使用 Cairo 库进行绘图。