JavaFx circle with two colors - javafx

Question

Could someone help me? I Need draw a circle in javaFX. It should be Partially filled (bottom part). Top part should be transparent. Level of filled part I should able to change in runtime. Also, it could be circle filled with two colors
Thanks

Answer 1

You could just use a rectangle and a circle as its clipping shape. By moving the rectangle up and down while keeping the clipping in place you could simulate the filling level.

Answer 2

You could use a Linear Gradient to do this inside a method where you must each time indicate a color :
private void changeColor(String color){
if(color == null){
color = "transparent";
}
circle.setStyle("-fx-fill:linear-gradient( from 100.0% 100.0% to 100.0% 0.0%, rgb(77,102,204) 0.5," + color +" 0.5);");
}
Here's a demo :
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class Launcher extends Application{
private Pane root = new Pane();
private Scene scene;
private Circle circle = new Circle(200, 200, 100);
private Button btn = new Button("Change");
private boolean change = false;
#Override
public void start(Stage stage) throws Exception {
btn.setOnAction(evt->{
if(change){
change = !change;
changeColor("red");
}else{
change = !change;
changeColor("transparent");
}
});
changeColor("green");
root.getChildren().addAll(btn,circle);
scene = new Scene(root,400,400);
stage.setScene(scene);
stage.show();
}
private void changeColor(String color){
if(color == null || color.isEmpty()){
color = "transparent";
}
circle.setStyle("-fx-fill:linear-gradient( from 100.0% 100.0% to 100.0% 0.0%, rgb(77,102,204) 0.5," + color +" 0.5);");
}
public static void main(String[] args) {
launch(args);
}
}
It's just a simple method you can find better and more powerful example I think, good luck !