Cario 繪圖 II · ZetCode 中文系列教程

# Cario 繪圖 II > 原文： [http://zetcode.com/gui/javagnome/drawingII/](http://zetcode.com/gui/javagnome/drawingII/) 在 Java Gnome 編程教程的這一部分中，我們將繼續使用 Cairo 庫進行繪制。 ## 甜甜圈在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 `donut.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 a Donut * shape on the drawing area. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GDonut extends Window implements Widget.ExposeEvent { public GDonut() { setTitle("Donut"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(300, 260); 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()); drawDonut(cr); return false; } public void drawDonut(Context cr) { int width = this.getWindow().getWidth(); int height = this.getWindow().getHeight(); cr.setLineWidth(0.5); cr.translate(width/2, height/2); cr.arc( 0, 0, 120, 0, 2 * Math.PI); cr.stroke(); cr.save(); for ( int i = 0; i < 36; i++) { Matrix mat = new Matrix(); mat.rotate(i*Math.PI/36); mat.scale(0.3, 1); cr.transform(mat); cr.arc(0, 0, 120, 0, 2 * Math.PI); cr.restore(); cr.stroke(); cr.save(); } } public static void main(String[] args) { Gtk.init(args); new GDonut(); Gtk.main(); } } ``` 在此示例中，我們創建一個甜甜圈。形狀類似于曲奇，因此得名“甜甜圈”。 ```java cr.translate(width/2, height/2); cr.arc( 0, 0, 120, 0, 2 * Math.PI); cr.stroke(); ``` 剛開始時有一個橢圓。 ```java Matrix mat = new Matrix(); mat.rotate(i*Math.PI/36); mat.scale(0.3, 1); cr.transform(mat); cr.arc(0, 0, 120, 0, 2 * Math.PI); cr.restore(); cr.stroke(); cr.save(); ``` 旋轉幾圈后，有一個甜甜圈。 ![Donut](https://img.kancloud.cn/b4/e2/b4e2dbe591fdac454c899474feb7eebe_306x285.jpg) 圖：多納圈 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。（answers.com） `gradients.java` ```java package com.zetcode; import org.freedesktop.cairo.Context; import org.freedesktop.cairo.LinearPattern; import org.gnome.gdk.Color; 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 gradients. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GGradients extends Window implements Widget.ExposeEvent { public GGradients() { setTitle("Gradients"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(340, 390); 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()); drawGradients(cr); return false; } public void drawGradients(Context cr) { LinearPattern lg1 = new LinearPattern(0.0, 0.0, 350.0, 350.0); int count = 1; for (double j=0.1; j<1.0; j+= 0.1) { if (count % 2 != 0) { lg1.addColorStopRGB(j, 0, 0, 0); } else { lg1.addColorStopRGB(j, 1, 0, 0); } count++; } cr.rectangle(20, 20, 300, 100); cr.setSource(lg1); cr.fill(); LinearPattern lg2 = new LinearPattern(0.0, 0.0, 350.0, 0); count = 1; for (double i=0.05; i<0.95; i+= 0.025) { if (count % 2 != 0) { lg2.addColorStopRGB(i, 0, 0, 0); } else { lg2.addColorStopRGB(i, 0, 0, 1); } count++; } cr.rectangle(20, 140, 300, 100); cr.setSource(lg2); cr.fill(); LinearPattern lg3 = new LinearPattern(20.0, 260.0, 20.0, 360.0); lg3.addColorStopRGB(0.1, 0, 0, 0 ); lg3.addColorStopRGB(0.5, 1, 1, 0); lg3.addColorStopRGB(0.9, 0, 0, 0 ); cr.rectangle(20, 260, 300, 100); cr.setSource(lg3); cr.fill(); } public static void main(String[] args) { Gtk.init(args); new GGradients(); Gtk.main(); } } ``` 在我們的示例中，我們繪制了三個具有三個不同漸變的矩形。 ```java LinearPattern lg1 = new LinearPattern(0.0, 0.0, 350.0, 350.0); ``` 在這里，我們創建一個線性漸變圖案。參數指定直線，沿著該直線繪制漸變。在我們的情況下，它是一條對角線。 ```java LinearPattern lg3 = new LinearPattern(20.0, 260.0, 20.0, 360.0); lg3.addColorStopRGB(0.1, 0, 0, 0 ); lg3.addColorStopRGB(0.5, 1, 1, 0); lg3.addColorStopRGB(0.9, 0, 0, 0 ); ``` 我們定義色標以產生漸變圖案。在這種情況下，漸變是黑色和黃色的混合。通過添加兩個黑色和一個黃色色標，我們創建了一個水平漸變圖案。這些停止實際上是什么意思？在我們的情況下，我們從黑色開始，該顏色將以大小的 1/10 停止。然后，我們開始逐漸涂成黃色，最終達到形狀的中心。黃色停在大小的 9/10，我們再次開始用黑色繪圖，直到結束。 ![Gradients](https://img.kancloud.cn/bc/b4/bcb4998b07e2a6b418840cb909affead_346x415.jpg) 圖：漸變 ## 星形在下面的示例中，我們創建了一顆移動的星星。星星移動，旋轉并成長/收縮。 `star.java` ```java package com.zetcode; import java.util.Timer; import java.util.TimerTask; 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 shows an animated star. Rotate, * translate and scale operations are * applied on the star. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GStar extends Window implements Widget.ExposeEvent { private static Timer timer; private int count; private double angle = 0; private double scale = 1; private double delta = 0.01; double points[][] = { { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, { 40, 190 }, { 50, 125 }, { 0, 85 } }; public GStar() { setTitle("Star"); timer = new Timer(); timer.scheduleAtFixedRate(new ScheduleTask(), 100, 20); count = 0; initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { timer.cancel(); Gtk.mainQuit(); return false; } }); setSizeRequest(350, 250); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); darea.connect(this); add(darea); } public void drawStar(Context cr) { int width = this.getWindow().getWidth(); int height = this.getWindow().getHeight(); cr.setSource(0, 0.44, 0.7); cr.setLineWidth(1); Matrix mat = new Matrix(); mat.translate(width/2, height/2); mat.rotate(angle); mat.scale(scale, scale); cr.transform(mat); for ( int i = 0; i < 10; i++ ) { cr.lineTo(points[i][0], points[i][1]); } cr.fill(); cr.stroke(); if ( scale < 0.01 ) { delta = -delta; } else if (scale > 0.99) { delta = -delta; } scale += delta; angle += 0.01; } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { Context cr = new Context(widget.getWindow()); drawStar(cr); return false; } class ScheduleTask extends TimerTask { public void run() { count++; queueDraw(); } } public static void main(String[] args) { Gtk.init(args); new GStar(); Gtk.main(); } } ``` 我們對星形應用平移，縮放和旋轉操作。 ```java public boolean onDeleteEvent(Widget source, Event event) { timer.cancel(); Gtk.mainQuit(); return false; } ``` 為了干凈出口，我們一定不要忘記停止計時器。 `Timer`是 Java `util`庫的對象，并且不被`Gtk.mainQuit()`方法停止。 ```java double points[][] = { { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, { 40, 190 }, { 50, 125 }, { 0, 85 } }; ``` 這些點用于構建星形。 ```java Matrix mat = new Matrix(); mat.translate(width/2, height/2); mat.rotate(angle); mat.scale(scale, scale); cr.transform(mat); ``` 在這里，我們對星形應用平移，旋轉和縮放操作。 ```java for ( int i = 0; i < 10; i++ ) { cr.lineTo(points[i][0], points[i][1]); } ``` 在這里，我們畫星星。 ## 等待在此示例中，我們使用透明效果創建一個等待演示。我們將繪制 8 條線，這些線將逐漸消失，從而產生一條線在移動的錯覺。這種效果通常用于通知用戶，一項艱巨的任務正在幕后進行。一個示例是通過互聯網流式傳輸視頻。 `waiting.java` ```java package com.zetcode; import java.util.Timer; import java.util.TimerTask; 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 creates a waiting * effect. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GWaiting extends Window implements Widget.ExposeEvent { private static Timer timer; private int count; private final double[][] trs = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, { 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 }, { 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65, 0.8 }, { 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65 }, { 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5 }, { 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3 }, { 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15 }, { 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, } }; public GWaiting() { setPosition(WindowPosition.CENTER); timer = new Timer(); timer.scheduleAtFixedRate(new ScheduleTask(), 100, 80); count = 0; initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { timer.cancel(); Gtk.mainQuit(); return false; } }); resize(250, 150); setTitle("Waiting"); showAll(); } public void initUI() { DrawingArea darea = new DrawingArea(); add(darea); darea.connect(this); } public boolean onExposeEvent(Widget widget, EventExpose eventExpose) { Context cr = new Context(widget.getWindow()); drawWaiting(cr); return false; } private void drawWaiting(Context cr) { int w = this.getWidth(); int h = this.getHeight(); cr.translate(w/2, h/2); for (int i = 0; i < 8; i++) { cr.setLineWidth(3); cr.setSource(0, 0, 0, trs[count%8][i]); cr.moveTo(0, -10); cr.lineTo(0, -40); cr.rotate(Math.PI/4f); cr.stroke(); } } class ScheduleTask extends TimerTask { public void run() { count++; queueDraw(); } } public static void main(String[] args) { Gtk.init(args); new GWaiting(); Gtk.main(); } } ``` 我們用八個不同的 alpha 值繪制八條線。 ```java private final double[][] trs = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, .... }; ``` 這是此演示中使用的透明度值的二維數組。有 8 行，每行一種狀態。 8 行中的每行將連續使用這些值。 ```java cr.setLineWidth(3); ``` 我們使線條更粗一些，以便更好地顯示它們。 ```java cr.setSource(0, 0, 0, trs[count%8][i]); ``` 在這里，我們定義了一條線的透明度值。 ```java cr.moveTo(0, -10); cr.lineTo(0, -40); cr.rotate(Math.PI/4f); cr.stroke(); ``` 這些代碼行將繪制八行中的每行。 ![Waiting](https://img.kancloud.cn/72/bd/72bda4dbfe7083101206c2c767785bd3_256x175.jpg) 圖：等待在 Java Gnome 編程庫的這一章中，我們使用 Cairo 庫進行了一些更高級的繪制。