JavaFX 奥运五环以正确的顺序重叠

Question

这是我第一次在这里发帖。我目前正在做一项作业，我需要在 JavaFX 中创建奥运五环并使它们在正确的位置相交。

它应该是这样的:

_{(来源:ashaw8 at ksuweb.kennesaw.edu)}

目前，环相交，但它们以我创建对象的顺序为主。当它们相交时，蓝色被黄色覆盖，当它们相交时，黄色被黑色覆盖，等等。正如您在奥林匹克五环图片中看到的那样，黄色和蓝色第一次相交时，黄色覆盖蓝色，但第二次蓝色覆盖黄色时间。每个环在它们相交时被另一个环覆盖，但在另一次相交时被另一个环覆盖。

如果有人能指出正确的方向，让我知道如何使它们正确相交，那就太棒了。

这是我目前的代码:

package com.company;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class OlympicRings extends Application{

    public void start(Stage primaryStage) {

        //creates a new object, which will be the first circle
        Circle circle1 = new Circle();
        circle1.setCenterX(100); //sets the x coordinate for the center of the circle
        circle1.setCenterY(100); //sets the y coordinate for the center of the circle
        circle1.setRadius(50); //sets the radius of the circle to 50, makes the diameter 100
        circle1.setStroke(Color.BLUE); //sets the color of the circle
        circle1.setStrokeWidth(10); //sets the thickness of the lines
        circle1.setFill(null); //sets the color of the inside of the circle, set to null to enable overlap

        Circle circle2 = new Circle(); //creates additional circles
        circle2.setCenterX(160);
        circle2.setCenterY(150);
        circle2.setRadius(50);
        circle2.setStroke(Color.YELLOW);
        circle2.setStrokeWidth(10);
        circle2.setFill(null);

        Circle circle3 = new Circle();
        circle3.setCenterX(220);
        circle3.setCenterY(100);
        circle3.setRadius(50);
        circle3.setStroke(Color.BLACK);
        circle3.setStrokeWidth(10);
        circle3.setFill(null);

        Circle circle4 = new Circle();
        circle4.setCenterX(280);
        circle4.setCenterY(150);
        circle4.setRadius(50);
        circle4.setStroke(Color.GREEN);
        circle4.setStrokeWidth(10);
        circle4.setFill(null);

        Circle circle5 = new Circle();
        circle5.setCenterX(340);
        circle5.setCenterY(100);
        circle5.setRadius(50);
        circle5.setStroke(Color.RED);
        circle5.setStrokeWidth(10);
        circle5.setFill(null);

        //creating the pane that will display the circle
        Pane pane = new Pane();
        pane.getChildren().add(circle1); //each of these adds the various circles to the display of the pane
        pane.getChildren().add(circle2);
        pane.getChildren().add(circle3);
        pane.getChildren().add(circle4);
        pane.getChildren().add(circle5);

        Scene scene1 = new Scene(pane, 440, 250); //creates the parameters of the pane
        primaryStage.setTitle("Olympic Rings"); //names the pane
        primaryStage.setScene(scene1); //picks what will go in the pane
        primaryStage.show(); //shows the scene i've created
    }
}

Answer 1

这很难用 Circle 实现。这将大量使用 clip 属性，并且生成的代码不容易阅读。

改为Arcs可用于绘制环的一部分。在添加覆盖部分之前，只需将环的覆盖部分添加到父级即可。

前 2 次响铃的示例:

private static Arc createArc(double radius,
                             double centerX, double centerY,
                             double fromAngle, double toAngle,
                             Paint stroke,
                             double strokeWidth) {
    Arc arc = new Arc(centerX, centerY, radius, radius, fromAngle, toAngle - fromAngle);
    arc.setFill(null);
    arc.setStroke(stroke);
    arc.setStrokeWidth(strokeWidth);

    return arc;
}

@Override
public void start(Stage primaryStage) {
    Pane pane = new Pane(
            createArc(50, 60, 60, 90, 315, Color.BLUE, 10), // part of the blue ring containing part covered by yellow
            createArc(50, 110, 110, 0, 360, Color.YELLOW, 10),
            createArc(50, 60, 60, -45, 90, Color.BLUE, 10) // part covering the yellow ring
    );

    Scene scene = new Scene(pane);

    primaryStage.setScene(scene);
    primaryStage.show();
}