JavaFX 如何在不损失质量的情况下使用和缩放图像/图标？

Question

我需要在我的 JavaFX 应用程序中使用一些元素，这些元素使用

• 带有自定义符号/图标的按钮

• 横幅或背景图像。

此应用程序应在具有不同屏幕分辨率的多个设备上运行，并且我还（最终）需要缩放图像/图标（强制它们匹配特定大小/比例）。那么如何在质量损失最小的情况下做到这一点呢？我知道，不可能将 SVG 图形加载到图像视图中，所以我可能不得不使用 png/jpg。我应该使用不同尺寸的多个版本的图像/图标吗？或者我可以将一张高分辨率图像缩小到其尺寸的 1/3 而不会造成质量损失吗？（顺便说一句，是否可以将 SVG 与 css 一起使用？）

Answer 1

我相信 svg 路径是可扩展的，不会造成质量损失。文件格式：<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.Group?><?import javafx.scene.control.Button?><?import javafx.scene.layout.HBox?><?import javafx.scene.layout.StackPane?><?import javafx.scene.layout.VBox?><?import javafx.scene.shape.SVGPath?><VBox xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">&nbsp; &nbsp;<children>&nbsp; &nbsp; &nbsp; <StackPane prefHeight="400.0" prefWidth="400.0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<children>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Group fx:id="iconGroup">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<children>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SVGPath content="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</children>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Group>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</children>&nbsp; &nbsp; &nbsp; </StackPane>&nbsp; &nbsp; &nbsp; <HBox>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<children>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button mnemonicParsing="false" onAction="#onMinusButton" text="-0.5" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button mnemonicParsing="false" onAction="#onPlusButton" text="+0.5" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</children>&nbsp; &nbsp; &nbsp; </HBox>&nbsp; &nbsp;</children></VBox>代码：&nbsp; &nbsp; import javafx.application.Application;&nbsp; &nbsp; import javafx.event.ActionEvent;&nbsp; &nbsp; import javafx.fxml.FXML;&nbsp; &nbsp; import javafx.fxml.FXMLLoader;&nbsp; &nbsp; import javafx.scene.Group;&nbsp; &nbsp; import javafx.scene.Scene;&nbsp; &nbsp; import javafx.stage.Stage;&nbsp; &nbsp; public class SvgIconApp extends Application {&nbsp; &nbsp; &nbsp; &nbsp; private final SvgIconViewController controller = new SvgIconViewController();&nbsp; &nbsp; &nbsp; &nbsp; public static void main(String[] args) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; launch(args);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @Override&nbsp; &nbsp; &nbsp; &nbsp; public void start(Stage stage) throws Exception {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FXMLLoader fxmlLoader = new FXMLLoader(SvgIconApp.class.getResource("/svgiconview.fxml"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fxmlLoader.setController(controller);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fxmlLoader.load();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Scene scene = new Scene(fxmlLoader.getRoot());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stage.setScene(scene);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stage.show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; class SvgIconViewController {&nbsp; &nbsp; &nbsp; &nbsp; @FXML&nbsp; &nbsp; &nbsp; &nbsp; private Group iconGroup;&nbsp; &nbsp; &nbsp; &nbsp; @FXML&nbsp; &nbsp; &nbsp; &nbsp; private void onPlusButton(ActionEvent actionEvent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; double newScale = iconGroup.getScaleX() + 0.5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconGroup.setScaleX(newScale);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconGroup.setScaleY(newScale);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @FXML&nbsp; &nbsp; &nbsp; &nbsp; private void onMinusButton(ActionEvent actionEvent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; double newScale = iconGroup.getScaleX() - 0.5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconGroup.setScaleX(newScale);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconGroup.setScaleY(newScale);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }

Answer 2

如果您使用的是 Eclipse，则可以安装 e(fx)clipse 插件，除其他外，该插件提供了将普通 SVG 文件转换为 FXML 文件的工具，然后可以将其直接加载到 JavaFX 中。这是我需要缩放的基于矢量图形的标准程序。