本文介绍了图形自动填充按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用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);
}
}
这篇关于图形自动填充按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!