# 在 Java Gnome 中用 Cairo 繪圖 > 原文： [http://zetcode.com/gui/javagnome/drawing/](http://zetcode.com/gui/javagnome/drawing/) 在 Java 編程教程的這一部分中，我們將使用 Cairo 庫進行一些繪制。 Cairo 是用于創建 2D 矢量圖形的庫。 我們可以使用它來繪制自己的小部件，圖表或各種效果或動畫。 ## 簡單繪圖 描邊操作繪制形狀的輪廓，填充操作填充形狀的內部。 接下來，我們將演示這兩個操作。 `simpledrawing.java` ```java package com.zetcode; import org.freedesktop.cairo.Context; import org.gnome.gdk.Event; import org.gnome.gdk.EventExpose; import org.gnome.gtk.Allocation; import org.gnome.gtk.DrawingArea; import org.gnome.gtk.Gtk; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * Java Gnome tutorial * * This program draws a simple * drawing with the Cairo library. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GSimpleDrawing extends Window implements Widget.ExposeEvent { public GSimpleDrawing() { setTitle("Simple drawing"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(250, 200); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); darea.connect(this); add(darea); } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { final Context cr; cr = new Context(widget.getWindow()); drawShape(cr); return false; } public void drawShape(Context cr) { cr.setLineWidth(9); cr.setSource(0.7, 0.2, 0.0); int width, height; width = getAllocation().getWidth(); height = getAllocation().getHeight(); cr.translate(width/2, height/2); cr.arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI); cr.strokePreserve(); cr.setSource(0.3, 0.4, 0.6); cr.fill(); } public static void main(String[] args) { Gtk.init(args); new GSimpleDrawing(); Gtk.main(); } } ``` 在我們的示例中，我們將繪制一個圓并用純色填充它。 ```java DrawingArea darea = new DrawingArea(); ``` 我們將在`DrawingArea`小部件上進行繪制操作。 ```java public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { final Context cr; cr = new Context(widget.getWindow()); drawShape(cr); return false; } ``` 當需要重繪窗口時，將創建`ExposeEvent`。 實際圖形委托給`drawShape()`方法。 ```java cr = new Context(widget.getWindow()); ``` 我們從繪圖區域的 gdk 窗口創建`Context`對象。 上下文是我們繪制所有圖紙的對象。 ```java cr.setLineWidth(9); ``` 我們將線條的寬度設置為 9 像素。 ```java cr.setSource(0.7, 0.2, 0.0); ``` 我們將顏色設置為深紅色。 ```java int width, height; width = getAllocation().getWidth(); height = getAllocation().getHeight(); cr.translate(width/2, height/2); ``` 我們得到繪圖區域的寬度和高度。 我們將原點移動到窗口的中間。 ```java cr.arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI); cr.strokePreserve(); ``` 我們繪制一個圓形的外部形狀。 `strokePreserve()`根據當前的線寬，線連接，線帽和筆劃線設置描邊當前路徑。 與`stroke()`不同，它在 cairo 上下文中保留路徑。 ```java cr.setSource(0.3, 0.4, 0.6); cr.fill(); ``` 這會用一些藍色填充圓圈的內部。  圖：簡單 drawing ## 基本形狀 下一個示例將一些基本形狀繪制到窗口上。 `basicshapes.java` ```java package com.zetcode; import org.freedesktop.cairo.Context; import org.freedesktop.cairo.Matrix; import org.gnome.gdk.Event; import org.gnome.gdk.EventExpose; import org.gnome.gtk.DrawingArea; import org.gnome.gtk.Gtk; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program draws basic shapes * with the cairo library. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GBasicShapes extends Window implements Window.ExposeEvent { public GBasicShapes() { setTitle("Basic Shapes"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(390, 240); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); darea.connect(this); add(darea); } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { final Context cr; cr = new Context(widget.getWindow()); drawShapes(cr); return false; } public void drawShapes(Context cr) { cr.setSource(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(); Matrix mat = new Matrix(); mat.translate(220, 180); mat.scale(1, 0.7); cr.transform(mat); cr.arc(0, 0, 50, 0, 2*Math.PI); cr.fill(); } public static void main(String[] args) { Gtk.init(args); new GBasicShapes(); Gtk.main(); } } ``` 在此示例中，我們將創建一個矩形，正方形，圓形，弧形和橢圓形。 ```java cr.rectangle(20, 20, 120, 80); cr.rectangle(180, 20, 80, 80); cr.fill(); ``` 這些線繪制一個矩形和一個正方形。 ```java cr.arc(330, 60, 40, 0, 2*Math.PI); cr.fill(); ``` 此處`arc()`方法繪制一個完整的圓。 ```java Matrix mat = new Matrix(); mat.translate(220, 180); mat.scale(1, 0.7); cr.transform(mat); cr.arc(0, 0, 50, 0, 2*Math.PI); cr.fill(); ``` 如果要繪制橢圓形，請先進行一些縮放。 `scale()`方法縮小 y 軸。  圖：基本形狀 ## 色彩 顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cario 有效 RGB 值在 0 到 1 的范圍內。 `colors.java` ```java package com.zetcode; import org.freedesktop.cairo.Context; import org.gnome.gdk.Event; import org.gnome.gdk.EventExpose; import org.gnome.gtk.DrawingArea; import org.gnome.gtk.Gtk; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program draws nine rectangles * on the drawing area. Each of them * has different color. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GColors extends Window implements Widget.ExposeEvent { public GColors() { setTitle("Colors"); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); initUI(); setDefaultSize(350, 280); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); darea.connect(this); add(darea); } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { final Context cr; cr = new Context(widget.getWindow()); drawRectangles(cr); return false; } public void drawRectangles(Context cr) { cr.setSource(0.5, 0.65, 0.45); cr.rectangle(10, 15, 90, 60); cr.fill(); cr.setSource(0.16, 0.7, 0.9); cr.rectangle(130, 15, 90, 60); cr.fill(); cr.setSource(0.274, 0.262, 0.48); cr.rectangle(250, 15, 90, 60); cr.fill(); cr.setSource(0.5, 0.39, 0.33); cr.rectangle(10, 105, 90, 60); cr.fill(); cr.setSource(0.99, 0.83, 0.24); cr.rectangle(130, 105, 90, 60); cr.fill(); cr.setSource(0.95, 0.38, 0.27); cr.rectangle(250, 105, 90, 60); cr.fill(); cr.setSource(0.85, 0.57, 0.21); cr.rectangle(10, 195, 90, 60); cr.fill(); cr.setSource(0.25, 0.04, 0.73); cr.rectangle(130, 195, 90, 60); cr.fill(); cr.setSource(0.12, 0.08, 0.03); cr.rectangle(250, 195, 90, 60); cr.fill(); } public static void main(String[] args) { Gtk.init(args); new GColors(); Gtk.main(); } } ``` 我們用 9 種不同的顏色繪制 9 個矩形。 ```java cr.setSource(0.5, 0.65, 0.45); ``` `setSource()`方法為 Cario 上下文設置顏色。 該方法的三個參數是顏色強度值。 ```java cr.rectangle(10, 15, 90, 60); cr.fill(); ``` 我們創建一個矩形形狀，并用先前指定的顏色填充它。  圖：顏色 ## 透明矩形 透明性是指能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 Alpha 通道。 （wikipedia.org，answers.com） `transparentrectangles.java` ```java package com.zetcode; import org.freedesktop.cairo.Context; import org.gnome.gdk.Event; import org.gnome.gdk.EventExpose; import org.gnome.gtk.DrawingArea; import org.gnome.gtk.Gtk; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program draws ten rectangles * with different levels of transparency. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GTransparentRectangles extends Window implements Widget.ExposeEvent { public GTransparentRectangles() { setTitle("Transparent Rectangles"); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); initUI(); setSizeRequest(590, 90); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); add(darea); darea.connect(this); } public void doDrawing(Context cr) { for (int i = 1; i<=10; i++) { cr.setSource(0, 0, 1, 0.1*i); cr.rectangle(50*i, 20, 40, 40); cr.fill(); } } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { Context cr = new Context(widget.getWindow()); doDrawing(cr); return false; } public static void main(String[] args) { Gtk.init(args); new GTransparentRectangles(); Gtk.main(); } } ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```java cr.setSource(0, 0, 1, 0.1*i); ``` `setSource()`方法的最后一個參數是 alpha 透明度。  圖：透明矩形 在 Java Gnome 編程庫的這一章中，我們使用 Cairo 庫進行繪圖。