图形自动填充按钮 [英] Graphic automatically fill button

问题描述

我正在使用JavaFX，fxml和css显示带有图像的按钮.当我更改窗口的大小时，按钮的图像会随按钮的中心很好地移动.我还希望图像放大到按钮的80％，但我不知道该怎么做.如果不能仅使用fxml或css完成Java解决方案，也将很好.代码在下面，但是我还通过MWE在 GitHub 上进行了回购.

I'm using JavaFX, fxml, and css to display buttons with an image. When I change the size of the window, the image of the button nicely moves with the center of the button. I also want the image to scale up to, say, 80% of the button, but I can't figure out how to do that. A Java solution would be fine as well, if it can't be done in just fxml or css. The code is below, but I also made a repo with a MWE on GitHub.

fxml

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml"
          alignment="center"
          hgap="10"
          vgap="10">
    <rowConstraints>
        <RowConstraints percentHeight="50"/>
        <RowConstraints percentHeight="50"/>
    </rowConstraints>

    <Button
            fx:id="buttonUp"
            GridPane.columnIndex="0"
            GridPane.rowIndex="0"
            maxHeight="Infinity"
            maxWidth="Infinity"
            onMousePressed="#buttonUp"
            onMouseReleased="#buttonUp">
    </Button>

    <Button
            fx:id="buttonDown"
            GridPane.columnIndex="0"
            GridPane.rowIndex="1"
            maxHeight="Infinity"
            maxWidth="Infinity"
            onMousePressed="#buttonUp"
            onMouseReleased="#buttonUp">
    </Button>
</GridPane>

css

#buttonUp {
     -fx-graphic: url('resources/up_small.png');
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
     -fx-effect: null;
     -fx-background-color: transparent;
 }

#buttonUp:pressed  {
    -fx-graphic: url("resources/up_pressed_small.png");
}

#buttonDown {
    -fx-graphic: url('resources/down_small.png');
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-effect: null;
    -fx-background-color: transparent;
}

#buttonDown:pressed  {
    -fx-graphic: url("resources/down_pressed_small.png");
}

Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.input.MouseEvent;

public class Controller {

    @FXML
    protected void buttonUp(MouseEvent event) {
        if(event.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
            System.out.println("Up button pressed.");
        } else { // mouse released
            System.out.println("Up button released.");
        }
    }

    @FXML
    protected void buttonDown(MouseEvent event) {
        if(event.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
            System.out.println("Down button pressed.");
        } else { // mouse released
            System.out.println("Down button released.");
        }
    }
}

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.File;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Resizing");
        Scene scene = new Scene(root, 650, 350);
        File file = new File("src/sample/stylesheet.css");
        scene.getStylesheets().add(file.toURI().toString());
        primaryStage.setScene(scene);
        primaryStage.show();
    }


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

推荐答案

这有效！

    @Override
    public void initialize(URL url, ResourceBundle rb) {


        try {
            // TODO
            File selectedFile = new File("splash.png");
            if(selectedFile.exists())
            {
                System.out.println(selectedFile.getAbsolutePath());
            }
            //Image image = new Image(selectedFile.toURI().toURL().toString());
            //Image image = new Image(getClass().getResourceAsStream(selectedFile.getCanonicalPath()));
            Image image = new Image(selectedFile.toURI().toURL().toString());
            ImageView ivMain = new ImageView(image);
            ivMain.fitHeightProperty().bind(apMain.heightProperty());
            ivMain.fitWidthProperty().bind(apMain.widthProperty());
            Button btn2 = new Button("", ivMain);
            apMain.getChildren().add(btn2);
            btn2.setMaxWidth(Double.MAX_VALUE);
            btn2.setMaxHeight(Double.MAX_VALUE);


            apMain.widthProperty().addListener(new ChangeListener<Number>(){
                @Override
                public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                    btn2.setPrefWidth(newValue.intValue());
                }

            });

            apMain.heightProperty().addListener(new ChangeListener<Number>(){
                @Override
                public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                    btn2.setPrefHeight(newValue.intValue());
                }

            });
        } catch (MalformedURLException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        } catch (IOException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        }



    }  

这篇关于图形自动填充按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！