在JavaFX WebView中错误地调整了RadioButtons的大小 [英] Wrong resize of RadioButtons in JavaFX WebView
问题描述
当我放大在WebView中打开的网页（缩放系数< 1.0）时，大多数内容会按预期进行缩放，但是有些东西没有，例如单选按钮或复选框：
When I zoom in on a web page opened in a WebView (zoom factor < 1.0), most of the content gets scaled as expected, however there are some things that do not, like radio buttons or check boxes:
在上图中，第一个WebView是unzoomed并且虽然单选按钮具有（或几乎相同）大小，但第二个的变焦系数为0.5。
以下是此示例的代码：
In the above image the first WebView is unzoomed and the second has a zoom factor of 0.5 though the radio buttons have (or have nearly) the same size. Here is the code for this example:
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);
}
}
对我来说这是一个问题，因为有标签关闭在按钮右侧，如果缩放系数太低，标签将部分位于单选按钮上。
For me this is an issue because there are labels close to the right of the buttons, and if the zoom factor is too low, the label will be partially over the radio button.
我有两个问题：
- 为什么单选按钮没有正确缩放？当使用缩放系数> 1.0时，它们也保持相同的大小。
- 我能做些什么吗？我正在思考一些CSS，当缩放较低时，我可以强调更大的间距，但这取决于使用的缩放系数，它应该是适用于所有单选按钮和复选框的解决方案，而不是需要专门针对他们（通过id或样式类）。
推荐答案
这是一个问题使用本机代码，在javafx中使用webkit进行渲染，并且仍然存在于Java 1.8.0_60 中。
This is an issue with the native code, the rendering with webkit in javafx and is still present in Java 1.8.0_60.
解决方法是应用 -webkit-transform：自行调整（**你的尺度**）; 这个元素。
The workaround is to apply -webkit-transform: scale(**your scale here**); on this elements on your own.
如果你不打算动态更改 zoomProperty 我建议添加 CSS 样式：
If you don't intend to change the zoomProperty dynamically I suggest adding CSS style:
input[type="checkbox"], input[type="radio"] {
-webkit-transform: scale(**your scale here**);
}
另一种方法是 javascript 并且很好如果您打算动态更改 zoomProperty ：
The other approach is with javascript and is good if you intend to change the zoomProperty dynamically:
(function($){
var scaleCheckboxesAndRadioButtons = function(scale) {
var $elements= $('input[type="checkbox"], input[type="radio"]');
$elements.css("-webkit-transform", "scale(" + scale + ")");
}
}(jQuery));
只需在webview的zoomProperty上添加一个监听器，然后在更改时调用java中的javascript函数代码：
Than just add a listener on the zoomProperty of your webview and on change call the javascript function from your java code:
webView.zoomProperty().addListener((observable, oldValue, newValue) -> {
webView.getEngine().executeScript("scaleCheckboxesAndRadioButtons(" + newValue + ");");
});
这篇关于在JavaFX WebView中错误地调整了RadioButtons的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
