gpt4 book ai didi

java - JavaFX WebView 中单选按钮的大小调整错误

转载 作者:行者123 更新时间:2023-11-30 03:13:59 36 4
gpt4 key购买 nike

当我放大在 WebView 中打开的网页(缩放系数 < 1.0)时,大部分内容都会按预期缩放,但有些内容不会按预期缩放,例如单选按钮或复选框:

enter image description here

在上图中,第一个 WebView 未缩放,第二个 WebView 的缩放系数为 0.5,但单选按钮具有(或几乎)相同的大小。以下是此示例的代码:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.Stage;


public class WebViewScalingDemo2 extends Application {
@Override
public void start(Stage stage) throws Exception {

stage.setTitle("HTML");
stage.setWidth(800);
stage.setHeight(800);
Scene scene = new Scene(new Group());
final VBox root = new VBox();



String html = "<html><head><meta charset=\"utf-8\"><title>Radio-Buttons definieren</title><style>"+
"fieldset{"+
"border:none;"+
"}</style></head>"+
"<body><h1>Hier wird abkassiert!</h1><form action=\"#\"><p>Geben Sie Ihre Zahlungsweise an:</p>"+
"<fieldset><input type=\"radio\" id=\"mc\" name=\"Zahlmethode\" value=\"Mastercard\"><label for=\"mc\"> Mastercard</label><br>"+
"<input type=\"radio\" id=\"vi\" name=\"Zahlmethode\" value=\"Visa\"><label for=\"vi\"> Visa</label><br>"+
"<input type=\"radio\" id=\"ae\" name=\"Zahlmethode\" value=\"AmericanExpress\"><label for=\"ae\"> American Express</label>"+
"</fieldset></form></body></html>";

WebView webView1 = new WebView();
webView1.setPrefSize(300, 300);
webView1.setLayoutX(250);
webView1.setLayoutY(250);
webView1.getEngine().loadContent(html);
WebView webView2 = new WebView();
webView2.setPrefSize(300, 300);
webView2.setLayoutX(250);
webView2.setLayoutY(250);
webView2.getEngine().loadContent(html);

root.getChildren().addAll(webView1, webView2);


webView1.setZoom(1);
webView2.setZoom(0.5);

scene.setRoot(root);

stage.setScene(scene);
stage.show();

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

对我来说,这是一个问题,因为按钮右侧附近有标签,如果缩放系数太低,标签将部分覆盖单选按钮。

我有两个问题:

  1. 为什么单选按钮无法正确缩放?当使用 > 1.0 的缩放系数时,它们也保持相同的大小。
  2. 对此我能做些什么吗?我正在考虑一些CSS,当缩放较低时,我可以注入(inject)强制更大的间距,但这将取决于使用的缩放系数,它应该是一个适用于所有单选按钮和复选框的解决方案,而不需要需要专门针对它们(通过 id 或样式类)。

最佳答案

这是 native 代码的问题,在 javafx 中使用 webkit 进行渲染,并且在 Java 1.8.0_60 中仍然存在。

解决方法是自行对此元素应用 -webkit-transform:scale(**yourscalehere**);

如果您不打算动态更改 zoomProperty,我建议添加 CSS 样式:

input[type="checkbox"], input[type="radio"] {
-webkit-transform: scale(**your scale here**);
}

另一种方法是使用javascript,如果您打算动态更改zoomProperty,则该方法很好:

(function($){ 
var scaleCheckboxesAndRadioButtons = function(scale) {
var $elements= $('input[type="checkbox"], input[type="radio"]');
$elements.css("-webkit-transform", "scale(" + scale + ")");
}
}(jQuery));

不仅仅是在 webview 的 ZoomProperty 上添加一个监听器,并在更改时从 Java 代码中调用 javascript 函数:

webView.zoomProperty().addListener((observable, oldValue, newValue) -> {
webView.getEngine().executeScript("scaleCheckboxesAndRadioButtons(" + newValue + ");");
});

关于java - JavaFX WebView 中单选按钮的大小调整错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33036560/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com