webview - JavaFX 2 webviewの上にオーバーレイを作成するには?

Question

JavaFX 2 webview の上に JavaFx2 ウィジェットまたはキャンバスをオーバーレイすることは可能ですか?

WebView の上に JavaFX 2 を使用して透明なヒートマップを生成したいと考えています。

Answer 1

オーバーレイの追加は非常に簡単です。webview と任意のペインを StackPane に配置するだけです。

もう 1 つの話は、オーバーレイと Web ビューのデータを同期することです。これを実現するには、javascript を介して webview にオブジェクト座標を要求する必要があります。これは、stackoverflow の質問領域を見つけてオーバーレイにマークする例です。

public class WebOverlay extends Application {

    @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(); }
}

Answer 2

次のような意味ですか。

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);
    }
}