Question

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

Canvas canvas = new Canvas();

我想用pieces

绘制一些GraphicsContext

GraphicsContext gc = canvas.getGraphicsContext2D();

此方法具有创建round pieces的功能，此部分的Color无关紧要，实际上该方法绘制了circle，其中需要对绘图进行一些调整按照目标去做

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，其中根据目标需要对绘图进行一些调整

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)

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

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绘图

1 个答案: