JavaScript GTK 中的 Cario 繪圖 · ZetCode 中文系列教程

# 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](https://img.kancloud.cn/0d/9d/0d9d4d946d8488415c2cabc1813881ec_368x128.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](https://img.kancloud.cn/05/75/05757bb2044e3e4bd7f719ae5a16c73c_398x268.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](https://img.kancloud.cn/bc/20/bc205ca9edb22541d97c754edbaf8df9_598x118.jpg) 圖：透明矩形在 JavaScript GTK 教程的這一章中，我們使用 Cairo 庫進行繪圖。