着色JavaFX形状

Question

I have a Scene graph which contains two buttons, one for creating rectangles and one for creating circles, there is also a slider which, when moved will change the colour of the shape objects. The shapes are also draggable. Unfortunately, the colour slider doesn't quite work the way i want it to. The idea is that once the shape is created via the button, and the shape is clicked on with the mouse, the colour of the shape will change depending on where the slider is dragged (the only colour is red).

The issue is that i can't independently colour and recolour the shapes as i want - if the rectangle is created first followed by the circle, I can colour the rectangle but not the circle. if i create the circle fist followed by the rectangle, i can colour the circle and then the rectangle, but upon selecting the circle again, cannot colour it

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Slider;
import javafx.stage.Stage;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;


public class SquareRectangle extends Application
{
    private Rectangle selectedRectangle;
    private Circle selectedCircle;
    private int red = 255;
    private int green = 0;
    private int blue = 0;

    public static void main(String [] args)
    {
        launch(args);
    }
    public void start(Stage primaryStage)
    {
        Pane root = new Pane();
        Scene scene = new Scene(root,800,800);

        Button Rectangles = new Button("Rectangles");
        Button Circles = new Button("Circles");
        Slider ColorSlider = new Slider(0,255,0);
        Circles.setLayoutX(90);
        ColorSlider.setLayoutY(70);

        Rectangles.setOnAction(e ->{
            Rectangle rect = new Rectangle();
            rect.setLayoutX(1080/2);
            rect.setLayoutY(400);
            rect.setOnMouseDragged(f ->{
                rect.setX(f.getX());
                rect.setY(f.getY());
            });
            rect.setOnMousePressed(g ->{
                selectedRectangle = (Rectangle) g.getTarget();
            });
            root.getChildren().add(rect);
            rect.setHeight(100);
            rect.setWidth(200);
        });

        Circles.setOnAction( e ->{
            Circle circle = new Circle(300,300,100);
            circle.setLayoutX(200);
            circle.setLayoutY(200);
            circle.setOnMouseDragged(f ->{
                circle.setCenterX(f.getX());
                circle.setCenterY(f.getY());
            });
            circle.setOnMousePressed(g ->{
                selectedCircle = (Circle) g.getTarget();
            });
            root.getChildren().add(circle);
        });

        ColorSlider.valueProperty().addListener(
            (ObservableValue<? extends Number> ov,Number curVal, Number newVal)->{
                    if(selectedRectangle != null){
                        red = (int) ColorSlider.getValue();
                        selectedRectangle.setFill(Color.rgb(red,green,blue));
                }
                    else if(selectedCircle != null && selectedRectangle == null){
                        red = (int) ColorSlider.getValue();
                        selectedCircle.setFill(Color.rgb(red,green,blue));
                }
            });


        root.getChildren().addAll(Rectangles,Circles,ColorSlider);

        primaryStage.setTitle("Shapes");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

I'm not quite sure what I'm missing or have done wrong?

Answer 1

Whenever you choose a shape, that shape is then set selectedRectangle = (Rectangle) g.getTarget(); , or selectedCircle = (Circle) g.getTarget(); .

In your code for changing the colour, it will always check if the rectangle is not null:

if (selectedRectangle != null) {
    red = (int) ColorSlider.getValue();
    selectedRectangle.setFill(Color.rgb(red, green, blue));
} else if (selectedCircle != null && selectedRectangle == null) {
    red = (int) ColorSlider.getValue();
    selectedCircle.setFill(Color.rgb(red, green, blue));
}

Using your code above, make sure that selectedCircle is null in the first statement ( if (selectedRectangle != null && selectedCircle == null) { )

Also, you need to ensure that the other shape is set to null when a new shape is selected:

selectedRectangle = (Rectangle) g.getTarget();
selectedCircle = null;

and vice versa for the circle.