JavaFX 畫布 · ZetCode 中文系列教程

# JavaFX 畫布 > 原文： [http://zetcode.com/gui/javafx/canvas/](http://zetcode.com/gui/javafx/canvas/) `Canvas`是可以使用`GraphicsContext`提供的一組圖形命令繪制的圖像。它是進行繪圖的高級工具。 `GraphicsContext`用于使用緩沖區向`Canvas`發出繪圖調用。 ## 簡單的線條在第一個示例中，我們繪制了簡單的線條。線是基本的圖形基元。需要兩個坐標才能形成一條線。 `SimpleLinesEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program draws three lines which * form a rectangle. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SimpleLinesEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); drawLines(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Lines"); stage.setScene(scene); stage.show(); } private void drawLines(GraphicsContext gc) { gc.beginPath(); gc.moveTo(30.5, 30.5); gc.lineTo(150.5, 30.5); gc.lineTo(150.5, 150.5); gc.lineTo(30.5, 30.5); gc.stroke(); } public static void main(String[] args) { launch(args); } } ``` 該示例繪制了形成矩形的三條線。 ```java Canvas canvas = new Canvas(300, 300); ``` `Canvas`的寬度和高度指定了將畫布繪制命令渲染到的圖像的大小。所有繪圖操作都被裁剪到該圖像的邊界。 ```java GraphicsContext gc = canvas.getGraphicsContext2D(); ``` `getGraphicsContext2D()`返回與畫布關聯的`GraphicsContext`。 ```java drawLines(gc); ``` 該圖形委托給`drawLines()`方法。 ```java gc.beginPath(); ``` 線圖元表示為路徑元素。 `beginPath()`方法開始一個新路徑。 ```java gc.moveTo(30.5, 30.5); ``` `moveTo()`方法將當前路徑的起點移動到指定的坐標。 ```java gc.lineTo(150.5, 30.5); gc.lineTo(150.5, 150.5); gc.lineTo(30.5, 30.5); ``` `lineTo()`方法將線段添加到當前路徑。 ```java gc.stroke(); ``` `stroke()`方法使用當前的描邊繪圖描邊路徑。 ![Lines](https://img.kancloud.cn/e7/6c/e76cf3731a166935ff7d9432edf97cfa_302x276.jpg) 圖：直線 ## 描邊和填充描邊用于繪制形狀的輪廓。填充用于繪制形狀的內部。 `StrokeFillEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program draws an outline of a circle * and fills an interior of a circle. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class StrokeFillEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); doDrawing(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Stroke and fill"); stage.setScene(scene); stage.show(); } private void doDrawing(GraphicsContext gc) { gc.setStroke(Color.FORESTGREEN.brighter()); gc.setLineWidth(5); gc.strokeOval(30, 30, 80, 80); gc.setFill(Color.FORESTGREEN); gc.fillOval(130, 30, 80, 80); } public static void main(String[] args) { launch(args); } } ``` 該示例繪制了圓的輪廓并填充了圓的內部。 ```java gc.setStroke(Color.FORESTGREEN.brighter()); ``` `setStroke()`方法設置當前的筆觸繪圖屬性。默認顏色是黑色。 `GraphicsContext`的筆觸方法使用該屬性。 ```java gc.setLineWidth(5); ``` `setLineWidth()`設置當前線寬。 ```java gc.strokeOval(130, 30, 80, 80); ``` `strokeOval()`方法使用當前的描邊繪圖描邊橢圓。 ```java gc.setFill(Color.FORESTGREEN); ``` `setFill()`方法設置當前的填充涂料屬性。默認顏色是黑色。 `GraphicsContext`的填充方法使用該屬性。 ```java gc.fillOval(30, 30, 80, 80); ``` `fillOval()`使用當前的填充顏料填充橢圓形。 ![Stroke and fill](https://img.kancloud.cn/3c/54/3c54d88be3119ce912f30951911458dd_302x276.jpg) 圖：描邊和填充 ## 顏色 `Color`類用于處理 JavaFX 中的顏色。有許多預定義的顏色。可以使用 RGB 或 HSB 顏色模型創建自定義顏色值。 `ColoursEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program draws six circles in six * different colours. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ColoursEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); drawShapes(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 280, 200, Color.WHITESMOKE); stage.setTitle("Colours"); stage.setScene(scene); stage.show(); } private void drawShapes(GraphicsContext gc) { gc.setFill(Color.CADETBLUE); gc.fillOval(30, 30, 50, 50); gc.setFill(Color.DARKRED); gc.fillOval(110, 30, 50, 50); gc.setFill(Color.STEELBLUE); gc.fillOval(190, 30, 50, 50); gc.setFill(Color.BURLYWOOD); gc.fillOval(30, 110, 50, 50); gc.setFill(Color.LIGHTSEAGREEN); gc.fillOval(110, 110, 50, 50); gc.setFill(Color.CHOCOLATE); gc.fillOval(190, 110, 50, 50); } public static void main(String[] args) { launch(args); } } ``` 該示例使用預定義的顏色值繪制六個圓。 ```java gc.setFill(Color.CADETBLUE); ``` 預定義的`Color.CADETBLUE`顏色設置為當前填充。 ```java gc.fillOval(30, 30, 50, 50); ``` 圓形對象的內部填充有當前的`fill`屬性。 ![Colours](https://img.kancloud.cn/ca/60/ca60d61bfd1b425890286a8bddc52028_282x226.jpg) 圖：顏色 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在繪圖和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。有兩種類型的漸變：線性漸變和徑向漸變。 ### 線性漸變線性漸變是沿直線平滑混合顏色。它由`LinearGradient`類定義。 `LinearGradientEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program draws a linear gradient. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class LinearGradientEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); doDrawing(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Linear gradient"); stage.setScene(scene); stage.show(); } private void doDrawing(GraphicsContext gc) { Stop[] stops1 = new Stop[] { new Stop(0.2, Color.BLACK), new Stop(0.5, Color.RED), new Stop(0.8, Color.BLACK)}; LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops1); gc.setFill(lg1); gc.fillRect(50, 30, 200, 180); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們用線性漸變填充矩形。 ```java Stop[] stops1 = new Stop[] { new Stop(0.2, Color.BLACK), new Stop(0.5, Color.RED), new Stop(0.8, Color.BLACK)}; ``` 我們定義漸變的停止點。它們指定如何沿漸變分布顏色。 ```java LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops1); ``` 前四個參數指定漸變繪制所沿的線。第五個參數是比例參數，它設置坐標是否與該漸變填充的形狀成比例。第六個參數設置漸變的循環方法。最后一個參數為停止點。 ![LinearGradient](https://img.kancloud.cn/c5/6b/c56b8a4fb2ca7a158b3fba5d7222b239_302x276.jpg) 圖：`LinearGradient` ### 徑向漸變徑向漸變是圓和焦點之間顏色或陰影的平滑混合。徑向漸變由`RadialGradient`類定義。 `RadialGradientEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.RadialGradient; import javafx.scene.paint.Stop; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program draws a radial gradient. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class RadialGradientEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); doDrawing(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Radial gradient"); stage.setScene(scene); stage.show(); } private void doDrawing(GraphicsContext gc) { Stop[] stops1 = new Stop[] { new Stop(0, Color.RED), new Stop(1, Color.BLACK)}; RadialGradient lg1 = new RadialGradient(0, 0, 0.5, 0.5, 0.8, true, CycleMethod.NO_CYCLE, stops1); gc.setFill(lg1); gc.fillOval(30, 30, 150, 150); } public static void main(String[] args) { launch(args); } } ``` 該示例使用徑向漸變填充圓。 ```java Stop[] stops1 = new Stop[] { new Stop(0, Color.RED), new Stop(1, Color.BLACK)}; ``` 我們定義漸變的終止值。 ```java RadialGradient lg1 = new RadialGradient(0, 0, 0.5, 0.5, 0.8, true, CycleMethod.NO_CYCLE, stops1); ``` 創建了一個徑向漸變。前兩個參數是聚焦角和聚焦距離。接下來的兩個參數是漸變圓的圓心的 x 和 y 坐標。第五個參數是定義顏色漸變范圍的圓的半徑。 ![RadialGradient](https://img.kancloud.cn/04/f4/04f4e5701124f651b63d5152799f0354_302x276.jpg) 圖：`RadialGradient` ## 形狀矩形，橢圓形，弧形是基本的幾何形狀。 `GraphicsContext`包含用于繪制這些形狀的輪廓和內部的方法。 `ShapesEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.ArcType; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program paints six different * shapes. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ShapesEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(320, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); drawShapes(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 200, Color.WHITESMOKE); stage.setTitle("Shapes"); stage.setScene(scene); stage.show(); } private void drawShapes(GraphicsContext gc) { gc.setFill(Color.GRAY); gc.fillOval(30, 30, 50, 50); gc.fillOval(110, 30, 80, 50); gc.fillRect(220, 30, 50, 50); gc.fillRoundRect(30, 120, 50, 50, 20, 20); gc.fillArc(110, 120, 60, 60, 45, 180, ArcType.OPEN); gc.fillPolygon(new double[]{220, 270, 220}, new double[]{120, 170, 170}, 3); } public static void main(String[] args) { launch(args); } } ``` 該示例使用圖形上下文的`fill`方法繪制了六個不同的形狀。 ```java gc.setFill(Color.GRAY); ``` 形狀涂成灰色。 ```java gc.fillOval(30, 30, 50, 50); gc.fillOval(110, 30, 80, 50); ``` `fillOval()`方法繪制一個圓和一個橢圓。前兩個參數是 x 和 y 坐標。第三個和第四個參數是橢圓的寬度和高度。 ```java gc.fillRect(220, 30, 50, 50); ``` `fillRect()`使用當前的填充顏料填充矩形。 ```java gc.fillRoundRect(30, 120, 50, 50, 20, 20); ``` `fillRoundRect()`繪制一個矩形，其角是圓形的。該方法的最后兩個參數是矩形角的圓弧寬度和圓弧高度。 ```java gc.fillArc(110, 120, 60, 60, 45, 180, ArcType.OPEN); ``` `fillArc()`方法使用當前的填充涂料填充圓弧。最后三個參數是起始角度，角度擴展和閉合類型。 ```java gc.fillPolygon(new double[]{220, 270, 220}, new double[]{120, 170, 170}, 3); ``` `fillPolygon()`方法使用當前設置的填充涂料用給定的點填充多邊形。在我們的例子中，它繪制了一個直角三角形。第一個參數是包含多邊形點的 x 坐標的數組，第二個參數是包含多邊形點的 y 坐標的數組。最后一個參數是形成多邊形的點數。 ![Colurs](https://img.kancloud.cn/6b/64/6b6403731b2d5c3f4c16578bbcf9a711_302x226.jpg) 圖：顏色 ## 星形可以使用`strokePolygon()`和`fillPolygon()`方法繪制更復雜的形狀。下一個示例繪制一個星形。 `StarShapeEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program draws a Star shape on * a Canvas. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class StarShapeEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(300, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); drawStarShape(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Star"); stage.setScene(scene); stage.show(); } private void drawStarShape(GraphicsContext gc) { double xpoints[] = {10, 85, 110, 135, 210, 160, 170, 110, 50, 60}; double ypoints[] = {85, 75, 10, 75, 85, 125, 190, 150, 190, 125}; gc.strokePolygon(xpoints, ypoints, xpoints.length); } public static void main(String[] args) { launch(args); } } ``` 該示例繪制了星形的輪廓。形狀由十個坐標組成。 ```java double xpoints[] = {10, 85, 110, 135, 210, 160, 170, 110, 50, 60}; double ypoints[] = {85, 75, 10, 75, 85, 125, 190, 150, 190, 125}; ``` 這些是形狀的 x 和 y 坐標。 ```java gc.strokePolygon(xpoints, ypoints, xpoints.length); ``` 使用`strokePolygon()`方法繪制形狀。 ![Star shape](https://img.kancloud.cn/d3/75/d37560644cd60fe91b32858df1551d18_302x276.jpg) 圖：星星 shape ## 透明矩形透明性是指能夠透視材料的質量。在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 `TransparentRectanglesEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program draws ten rectangles with different * levels of transparency. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class TransparentRectanglesEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Canvas canvas = new Canvas(600, 300); GraphicsContext gc = canvas.getGraphicsContext2D(); drawRectangles(gc); root.getChildren().add(canvas); Scene scene = new Scene(root, 600, 100, Color.WHITESMOKE); stage.setTitle("Transparent rectangles"); stage.setScene(scene); stage.show(); } private void drawRectangles(GraphicsContext gc) { for (int i = 1; i <= 10; i++) { float alpha = i * 0.1f; gc.setFill(Color.FORESTGREEN); gc.setGlobalAlpha(alpha); gc.fillRect(50 * i, 20, 40, 40); } } public static void main(String[] args) { launch(args); } } ``` 該示例繪制了十個具有不同透明度級別的矩形。 ```java float alpha = i * 0.1f; ``` 在每個`for`周期中計算一個 alpha 值。 ```java gc.setGlobalAlpha(alpha); ``` `setGlobalAlpha()`方法設置當前狀態的全局 alpha。 ![Transparent rectangles](https://img.kancloud.cn/58/0b/580bee6182e4987f651fc02438f9dc1c_602x126.jpg) 圖：透明矩形在本章中，我們在`Canvas`節點上執行了繪制操作。