在 JavaFX 中使用 Canvas 绘图

Question

想象一下，您有一个 canvas 实例

Canvas canvas = new Canvas();

我想用 GraphicsContext

画一些 pieces

GraphicsContext gc = canvas.getGraphicsContext2D();

该方法有创建round pieces的功能，这部分的Color无所谓，实际上该方法绘制了一个circle，其中需要做一些调整图纸要按照objective

走

public void drawRoundPiece(GraphicsContext gc) {
        gc.setFill(Color.BLUE);//text color
        gc.setStroke(Color.BLUE);//text color
        gc.fillOval(50, 50, 50, 50);
        gc.strokeOval(50, 50, 50, 50);
        gc.fill();
        gc.stroke();
    }

该方法具有创建square pieces和circle in middle的功能，这部分的Color无所谓，实际上该方法绘制了一个square，在它需要根据 objective

对绘图进行一些调整

public void drawSquarePiece(GraphicsContext gc) {
        gc.setFill(Color.YELLOW);//text color
        gc.setStroke(Color.YELLOW);//text color
        gc.fillRoundRect(100, 10, 50, 50, 10, 10);
        gc.fill();
        gc.stroke();
    }

目标是在下面绘制像图像一样的碎片

有什么帮助吗？

Answer 1

您可能想看看 LinearGradient 填写。 Here 描述了它是如何工作的。它不是用纯色填充形状，而是用渐变图案填充它们。然后就是组合各种大小和图案的多个形状。

如果你想获得完全相同的颜色，你可能需要像我一样读取它们的 rgb 值并定义它们：

Color.rgb(225, 229, 111)

这是我的尝试。它并不完美，但有点类似于您要实现的目标。 Fiddle 颜色和大小，你会得到想要的结果，而不是给出绝对值，你可以参数化一些东西，例如阴影的大小，或者正方形和内部之间的 space圈子等等。

public class JavaFXTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Group root = new Group();
        Canvas canvas = new Canvas(300,100);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        Stop[] stops;
        LinearGradient gradient;

        // outer circle
        stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)};
        gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
        gc.setFill(gradient);
        gc.fillOval(10, 14, 40, 40);
        gc.fill();
        gc.stroke();

        // Inner circle
        stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)};
        gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
        gc.setFill(gradient);
        gc.fillOval(13, 17, 34, 34);
        gc.fill();
        gc.stroke();

        // Square shadow
        gc.rect(70, 10, 50, 50);
        gc.setFill(Color.GRAY);
        gc.fill();

        // Square
        gc.beginPath();
        gc.setFill(Color.rgb(225, 229, 111));
        gc.rect(70, 10, 48, 48);
        gc.fill();

        // Circle shadow
        gc.beginPath();
        stops = new Stop[]{new Stop(0, Color.GRAY), new Stop(1, Color.WHITE)};
        gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
        gc.setFill(gradient);
        gc.fillOval(74, 14, 40, 40);
        gc.fill();
        gc.setStroke(Color.WHITE);

        // Circle
        gc.setFill(Color.rgb(255, 255, 153));
        gc.fillOval(76, 16, 38, 38);
        gc.fill();
        gc.setStroke(Color.WHITE);
        gc.stroke();

        root.getChildren().add(canvas);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

这就是结果：

在 JavaFX 中使用 Canvas 绘图

Drawing with Canvas in JavaFX

javafx

canvas

javafx-2

javafx-8