如何從顏色選擇器設置窗格顏色

Question

我在 javafx 中有一些代碼，它有一個像畫布一樣工作的窗格。 我需要能夠從顏色選擇器填充窗格的背景顏色。

目前我有一個 Color 變量，它獲取從顏色選擇器中選擇的顏色，我嘗試將它設置為我的窗格（命名畫布），如下所示：

Color newColour = backgroundColourPicker.getValue();
canvas.setStyle("-fx-background-color: " + newColour + ";");

但是我得到這個輸出：

June 11, 2022 7:47:57 PM javafx.css.CssParser term
WARNING: CSS Error parsing '*{-fx-background-color: 0x00ffffff;}: Unexpected token '0x' at [1,24]

如何將我的顏色值交換為字符串以便能夠刪除前導 0x 並使其工作，或者如何讓我的窗格接受顏色值作為顏色？

Answer 1

如果將來有人需要，我發現此代碼對我有用：

Color newColour = backgroundColourPicker.getValue();
Double red = newColour.getRed()*100;
int rInt = red.intValue();
Double green = newColour.getGreen()*100;
int gInt = green.intValue();
Double blue = newColour.getBlue()*100;
int bInt = blue.intValue();
String hex = String.format("#%02X%02X%02X", rInt, gInt, bInt);
canvas.setStyle("-fx-background-color: " + hex + ";");

Answer 2

如果您不需要區域background的所有特征（圖像、填充等）並且純色就足夠了，還可以考慮將顏色選擇器的 value 屬性綁定到填充區域的合適Shape的填充顏色。 根據此處看到的示例，下面的變體說明了一個ColorPane ，它呈現一個Rectangle ，其大小綁定到封閉的Pane ，其顏色綁定到保存矩形顏色的ObjectProperty<Color> 。 對前景Circle進行了類似的安排。 一個好處是自定義顏色會隨着控件的調整而更新。 這里收集了幾個相關的例子。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.beans.InvalidationListener;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.NumberBinding;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * @see https://stackoverflow.com/q/72583321/230513
 * @see https://stackoverflow.com/a/70312046/230513
 */
public class ColorTest extends Application {
    
    private final class ColorPane extends Pane {
        
        public static final Color bgColor = Color.BLUE;
        public static final Color fgColor = Color.CYAN;
        private final Rectangle r = new Rectangle();
        private final Circle c = new Circle(8, fgColor);
        private final ObjectProperty<Color> bg = new SimpleObjectProperty<>(bgColor);
        private final ObjectProperty<Color> fg = new SimpleObjectProperty<>(fgColor);
        private final InvalidationListener listener = (o) -> update();
        
        public ColorPane() {
            this.setPrefSize(256, 256);
            r.widthProperty().bind(this.widthProperty());
            r.heightProperty().bind(this.heightProperty());
            r.setFill(bgColor);
            this.getChildren().add(r);
            c.centerXProperty().bind(widthProperty().divide(2));
            c.centerYProperty().bind(heightProperty().divide(2));
            NumberBinding diameter = Bindings.min(widthProperty(), heightProperty());
            c.radiusProperty().bind(diameter.divide(2).subtract(diameter.divide(10)));
            this.getChildren().add(c);
            bg.addListener(listener);
            fg.addListener(listener);
        }
        
        private void update() {
            r.setFill(bg.get());
            c.setFill(fg.get());
        }
        
        public ObjectProperty<Color> bgProperty() {
            return bg;
        }
        
        public ObjectProperty<Color> fgProperty() {
            return fg;
        }
    }
    
    private Pane createControlPane(ColorPane view) {
        ColorPicker bgPicker = new ColorPicker(view.bgProperty().get());
        bgPicker.setTooltip(new Tooltip("Background color."));
        view.bgProperty().bindBidirectional(bgPicker.valueProperty());
        ColorPicker fgPicker = new ColorPicker(view.fgProperty().get());
        fgPicker.setTooltip(new Tooltip("Foreground color."));
        view.fgProperty().bindBidirectional(fgPicker.valueProperty());
        return new VBox(16, bgPicker, fgPicker);
    }
    
    @Override
    public void start(Stage stage) {
        var root = new BorderPane();
        ColorPane colorPane = new ColorPane();
        root.setCenter(colorPane);
        root.setLeft(createControlPane(colorPane));
        stage.setScene(new Scene(root));
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

如果您確實需要區域background的特征，以下示例說明了根據所選顏色屬性將GradientPane的背景動態替換為包含LinearGradient的背景。 該方法具有與調整控件相同的實時自定義顏色更新的好處，如上圖所示。

import javafx.application.Application;
import javafx.beans.InvalidationListener;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.NumberBinding;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 * @see https://stackoverflow.com/q/72583321/230513
 * @see https://stackoverflow.com/a/70312046/230513
 */
public class ColorTest extends Application {

    private final class GradientPane extends Pane {

        public static final Color c1Color = Color.BLUE;
        public static final Color c2Color = Color.CYAN;
        private final Circle c = new Circle(8, c2Color);
        private final ObjectProperty<Color> c1 = new SimpleObjectProperty<>(c1Color);
        private final ObjectProperty<Color> c2 = new SimpleObjectProperty<>(c2Color);
        private final InvalidationListener listener = (o) -> update();

        public GradientPane() {
            this.setPrefSize(256, 256);
            c.centerXProperty().bind(widthProperty().divide(2));
            c.centerYProperty().bind(heightProperty().divide(2));
            NumberBinding diameter = Bindings.min(widthProperty(), heightProperty());
            c.radiusProperty().bind(diameter.divide(2).subtract(diameter.divide(10)));
            this.getChildren().add(c);
            c1.addListener(listener);
            c2.addListener(listener);
            update();
        }

        private void update() {
            Stop[] stops = new Stop[]{new Stop(0, c1.get()), new Stop(1, c2.get())};
            LinearGradient lg = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
            this.setBackground(new Background(new BackgroundFill(lg, CornerRadii.EMPTY, Insets.EMPTY)));
            stops = new Stop[]{new Stop(0, c2.get()), new Stop(1, c1.get())};
            lg = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
            c.setFill(lg);
        }

        public ObjectProperty<Color> c1Property() {
            return c1;
        }

        public ObjectProperty<Color> c2Property() {
            return c2;
        }
    }

    private Pane createControlPane(GradientPane view) {
        ColorPicker bgPicker = new ColorPicker(view.c1Property().get());
        bgPicker.setTooltip(new Tooltip("Color stop one."));
        view.c1Property().bindBidirectional(bgPicker.valueProperty());
        ColorPicker fgPicker = new ColorPicker(view.c2Property().get());
        fgPicker.setTooltip(new Tooltip("Color stop two."));
        view.c2Property().bindBidirectional(fgPicker.valueProperty());
        VBox vBox = new VBox(10, bgPicker, fgPicker);
        vBox.setPadding(new Insets(10));
        return vBox;
    }

    @Override
    public void start(Stage stage) {
        var root = new BorderPane();
        GradientPane colorPane = new GradientPane();
        root.setCenter(colorPane);
        root.setLeft(createControlPane(colorPane));
        stage.setScene(new Scene(root));
        stage.show();
    }

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