JavaFX WebView 中 RadioButtons 的大小调整错误

Question

当我放大在 WebView 中打开的网页时（缩放系数 < 1.0），大部分内容都按预期缩放，但有些内容没有按预期缩放，例如单选按钮或复选框：

在上图中，第一个 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.0 时，它们也保持相同的大小。
我能做些什么吗？我在考虑一些 CSS 我可以在缩放比例较低时注入强制更大的间距，但这取决于使用的缩放系数，它应该是适用于所有单选按钮并检查的解决方案框，无需专门针对它们（通过 id 或样式 class）。

Answer 1

这是本机代码的问题，在 javafx 中使用 webkit 进行渲染并且在 Java 1.8.0_60[=29 中仍然存在=].

解决方法是自行对这些元素应用 -webkit-transform: scale(**your scale here**);。

如果您不打算动态更改 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 + ");"); });

JavaFX WebView 中 RadioButtons 的大小调整错误

Wrong resize of RadioButtons in JavaFX WebView

java

javafx

zooming