JavaFX / CSS: повышение яркости исходного цвета кнопки при наведении курсора мыши - PullRequest
0 голосов
/ 27 мая 2020

У меня есть множество кнопок, каждая со своим собственным цветом фона (-fx-background-color: rgb (xxx, xxx, xxx). Цвета кнопок определены в файлах .f xml.

Теперь я хотел бы определить в файле. css цвет фона каждой кнопки, который будет ярче при наведении указателя мыши.

Например: Обычный цвет Button1 - -fx-background-color: rgb (176 , 30,0) При наведении указателя мыши он должен измениться на -fx-background-color: rgba (176,30,0,0.7)

Моя первая проблема: определенный -fx-background-color в f xml файл перезаписывает .button: hover {-fx-background-color: rgba (176,30,0,0.7);}, определенный в файле. css.

Вторая проблема: Есть есть даже способ указать через css, что цвет кнопки должен при наведении указателя мыши сохранять свои значения rgb и просто добавить дополнительно значение 0,7?

Заранее спасибо!

1 Ответ

3 голосов
/ 27 мая 2020

Моя первая проблема: [...]

Это просто определенная иерархия, которая, например, команда стилизации цвета фона для одного элемента управления, созданная в файле F XML, всегда будет перезапишите команду стиля для того же элемента управления, сделанного в файле CSS. Это такое же поведение, как если бы у вас был чистый CSS с набором #id и набором .class для элемента управления. Например, цвет фона, определенный в операторе id, заменит цвет фона, определенный для класса. Так что это стандартное поведение, и вы не можете его изменить.

Вторая проблема: [...]

Нет такой CSS команды, как „-Fx-background-прозрачность: 0,7;“. Вы можете сделать это так, используя CSS (и без перезаписи в F XML):

CSS Файл:

.my-btn-class {
    -fx-background-color: rgb(176, 30, 0);
}

.my-btn-class:hover {
    -fx-background-color: rgba(176, 30, 0, 0.7);
}

F XML Файл:

  <?xml version="1.0" encoding="UTF-8"?>

    <?import javafx.scene.control.Button?>


    <Button styleClass="my-btn-class" stylesheets="@styling.css" text="Button" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" />

Или вы могли бы сделать это так:

Класс контроллера:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

import java.net.URL;
import java.util.ResourceBundle;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class Controller implements Initializable {

    @FXML
    private Button button;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        button.hoverProperty().addListener(((observable, oldValue, newValue) -> makeButtonTransparent(button, newValue)));
    }

    private void makeButtonTransparent(Button button, boolean transparent) {

        // Get the current style statements:
        String currentStyle = button.getStyle();

        // Check if there is a styling statement for background color with rgb or rgba:
        Pattern pattern = Pattern.compile("-fx-background-color: rgb(a?)\\(([\\d,\\s.])*\\);");
        Matcher matcher = pattern.matcher(currentStyle);

        String currentBackgroundColorStyle;
        if (matcher.find()) {
            // Extract the existing background color statement:
            currentBackgroundColorStyle = currentStyle.substring(matcher.start(), matcher.end());
        } else
            // No statement for background color in rgb(a) found:
            return;

        // Get the rgb values from the string:
        int[] rgb = new int[3];
        matcher = Pattern.compile("\\d{1,3}").matcher(currentBackgroundColorStyle);

        for (int i = 0; i < 3; i++) {
            if (matcher.find())
                rgb[i] = Integer.parseInt(currentBackgroundColorStyle.substring(matcher.start(), matcher.end()));
        }

        if (transparent)
            // Replace the background color statement with transparency value:
            button.setStyle(currentStyle.replace(currentBackgroundColorStyle, String.format("-fx-background-color: rgba(%d, %d, %d, 0.7);", rgb[0], rgb[1], rgb[2])));
        else
            // Replace the background color statement without transparency value:
            button.setStyle(currentStyle.replace(currentBackgroundColorStyle, String.format("-fx-background-color: rgb(%d, %d, %d);", rgb[0], rgb[1], rgb[2])));
    }
}

F XML Файл:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>


<Button fx:id="button" style="-fx-background-color: rgb(176, 30, 0); -fx-border-color: blue;" text="Button" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...