जावाएफएक्स 2 वेबव्यू के शीर्ष पर ओवरले कैसे बनाएं?

Question

क्या जावाएफएक्स 2 वेबव्यू के शीर्ष पर किसी भी JavaFx2 विजेट या कैनवास को ओवरले करना संभव है?

मैं वेबव्यू के शीर्ष पर जावाएफएक्स 2 के माध्यम से एक पारदर्शी हीटमैप उत्पन्न करना चाहता हूं।

Answer 1

आप कुछ इस तरह का मतलब है: बस डाल वेबव्यू और StackPane के लिए किसी भी फलक:

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

Answer 2

जोड़ना ओवरले बहुत आसान है।

एक और कहानी ओवरले और वेबव्यू डेटा को सिंक्रनाइज़ करना है। यह प्राप्त करने के लिए कि आपको जावास्क्रिप्ट के माध्यम से ऑब्जेक्ट निर्देशांक के लिए वेबव्यू पूछने की आवश्यकता है।

सार्वजनिक वर्ग 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(); } 
}