Как сделать наложение поверх веб-просмотра JavaFX 2?
Можно ли наложить какие-либо виджеты или холст JavaFx2 поверх веб-просмотра JavaFX 2?
Я хочу создать прозрачную тепловую карту с помощью JavaFX 2 поверх веб-просмотра.
Ответы на вопрос(2)
Добавить оверлей очень просто: просто поместите веб-просмотр и любую панель в StackPane.
Другая история заключается в синхронизации данных наложения и веб-просмотра. Чтобы достичь этого, вам нужно запросить webview для определения координат объекта через javascript. Вот пример, который находит область вопроса stackoverflow и помечает ее на оверлее:
открытый класс 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(); }
}
Вы также можете прослушать свойство документа веб-двигателя и использовать Java-запросы к документу, чтобы получить координаты.
Решение Вопроса
Вы имеете в виду что-то вроде этого:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.RectangleBuilder;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextBuilder;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class Demo extends Application {
@Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
webView.getEngine().load("http://www.google.com");
StackPane root = new StackPane();
root.getChildren().addAll(webView, getOverlay());
primaryStage.setScene(new Scene(root, 300, 250));
primaryStage.show();
}
private Pane getOverlay() {
StackPane p = new StackPane();
Rectangle r = RectangleBuilder.create()
.height(100).width(100)
.arcHeight(40).arcWidth(40)
.stroke(Color.RED)
.fill(Color.web("red", 0.1))
.build();
Text txt=TextBuilder.create().text("Overlay")
.font(Font.font("Arial", FontWeight.BOLD, 18))
.fill(Color.BLUE)
.build();
p.getChildren().addAll(r, txt);
return p;
}
public static void main(String[] args) {
launch(args);
}
}
Обратите внимание, что RetangleBuilder и TextBuilder теперь устарели.