Canvas 在JavaFX中使用画布绘制

想象一下，您有一个

canvas

实例

Canvas canvas = new Canvas();

我想用

GraphicsContext

GraphicsContext gc = canvas.getGraphicsContext2D();

该方法具有创建圆片的功能，该部分的颜色无关紧要，实际上该方法绘制了一个圆，需要根据目标对图纸进行一些调整

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

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

该方法具有创建中间有圆圈的

正方形

的功能，该部分的

颜色

无关紧要，实际上该方法绘制了一个

正方形

，其中需要根据目标对图形进行一些调整

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

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

目的是把这些碎片像图像一样画下来

---

有什么帮助吗？

您可能想看看

LinearGradient

fill。”这就是它的工作原理。它不是用纯色填充形状，而是用渐变图案填充形状。然后，它只是一个组合不同大小和模式的多种形状的问题

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

Color.rgb(225, 229, 111)

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

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

这就是结果：

---

谢谢Dth，还有里面有圆圈的正方形，也许如果我使用相同的例子，

正方形中的
蓝色圆圈
和
黄色圆圈
可能大小相同。我已经更新了我的答案，它们现在应该相等了。正如我所说，与大小相关的事情应该参数化，因为每次手动设置它都不是正确的方法。非常好，这就是可以使用
canvas在
canvas
中选择
蓝色圆圈的原因。setonmouse单击
并使用
canvas.setOnMouseMoved
水平移动，不知道蓝色圆圈的
位置
？