是否可以在 JavaFX 2 Web View 之上覆盖任何 JavaFx2 小部件或 Canvas ?
我想通过 JavaFX 2 在 Web View 之上生成透明热图。
最佳答案
添加叠加层非常简单:只需将 webview 和任何 Pane 放入 StackPane 即可。
另一个故事是同步overlay和webview数据。要实现这一点,您需要通过 javascript 向 webview 询问对象坐标。下面是一个查找 stackoverflow 问题区域并将其标记在叠加层上的示例:
公共(public)类 WebOverlay 扩展了应用程序{
@Override
public void start(Stage stage) {
StackPane root = new StackPane();
WebView webView = new WebView();
final WebEngine webEngine = webView.getEngine();
Canvas overlay = new Canvas(600,600);
overlay.setOpacity(0.5);
final GraphicsContext gc = overlay.getGraphicsContext2D();
gc.setFill(Color.RED);
root.getChildren().addAll(webView, overlay);
stage.setScene(new Scene(root, 600, 600));
webEngine.getLoadWorker().workDoneProperty().addListener((observable, oldValue, newValue) -> {
if (newValue.intValue() == 100) {
// find coordinates by javascript call
JSObject bounds = (JSObject)webEngine.executeScript("document.getElementsByClassName('question-hyperlink')[0].getBoundingClientRect()");
Number right = (Number)bounds.getMember("right");
Number top = (Number)bounds.getMember("top");
Number bottom = (Number)bounds.getMember("bottom");
Number left = (Number)bounds.getMember("left");
// paint on overlaing canvas
gc.rect(left.doubleValue(), top.doubleValue(), right.doubleValue(), bottom.doubleValue());
gc.fill();
}
});
webEngine.load("http://stackoverflow.com/questions/10894903/how-to-make-an-overlay-on-top-of-javafx-2-webview");
stage.show();
}
public static void main(String[] args) { launch(); }
}
关于webview - 如何在 JavaFX 2 webview 之上制作叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10894903/