Question

这是我第一次在这里发帖。我目前正在做一项任务，我需要在JavaFX中创建奥林匹克环并使它们在正确的位置交叉。

这应该是这样的：

olympic rings http://ksuweb.kennesaw.edu/~ashaw8/cs1302-07-Fall16/assignments/images/OlympicRings.png

目前，戒指相交，但它们按照我创建对象的顺序占主导地位。蓝色在相交时被黄色覆盖，当它们相交时黄色被黑色覆盖，等等。正如您在奥林匹克环的图片中看到的，黄色和蓝色第一次相交，黄色覆盖蓝色，但蓝色覆盖黄色第二次时间。一旦它们相交，每个环都被另一个环覆盖，但是在另一个环上覆盖它。

如果有人能指出我如何使它们正确交叉，那就太棒了。

这是我到目前为止的代码：

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可用于绘制部分戒指。在添加覆盖部分之前，只需将环的覆盖部分添加到父部分。

前两个戒指的例子：

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

Answer 2

感谢您提出这个问题，我有很多乐趣来提供以下解决方案，请参阅算法的Javadocs：

package olympicrings;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class OlympicRingsApplication extends Application {

    public void start(Stage primaryStage) {
        Pane pane = new Pane();
        OlympicRingsPaintingContext ctx = new OlympicRingsPaintingContext(pane, 50, 10);
        OlympicRingsPaintingContext.STANDARD_OLYMPIC_COLORS.forEach(ctx::paintNextRing);
// nobody stops you here though...
//      ctx.paintNextRing(javafx.scene.paint.Color.AQUA);

        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
    }

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

使用示例：

JSON

JavaFX Olympic Rings以正确的顺序重叠

2 个答案: