JavaScript GTK 中的 Cario 绘图

原文： http://zetcode.com/gui/javascriptgtktutorial/cairo/

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

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

色彩

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

#!/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();

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

var darea = new Gtk.DrawingArea();

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

darea.signal.expose_event.connect(on_expose);

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

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

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

draw_colors(cr);

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

cr.set_source_rgb(0.2, 0.23, 0.9);

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

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

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

cr.fill();

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

图：颜色

基本形状

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

#!/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();

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

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();

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

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）

#!/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();

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

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

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

图：透明矩形

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