2016-05-20 121 views
10

我正在研究一个JavaFX应用程序,其中包含少量由内部webkit浏览器呈现的html,css,JS文件。现在,问题在于我们所拥有的CSS动画在JavaFX提供的webkit浏览器中无法顺利呈现,但Firefox或Chrome中的相同代码更加流畅。另外,没有持久性可用(目前在Java中使用变量,并且通过JS进行持久化通信)。JavaFX:使用JavaFX嵌入可用webview以外的浏览器

我在找什么方法可以整合一些无头浏览器或一些设置来使CSS动画更流畅。我遇到的唯一的事情是JxBrowser,但它的个人使用成本太高。

代码:

public class Main extends Application { 

    private Scene scene; 
    MyBrowser myBrowser; 

    String completeText = ""; 

    @Override 
    public void start(Stage primaryStage) throws Exception{ 
     primaryStage.setTitle("Frontend"); 
     java.net.CookieManager manager = new java.net.CookieManager(); 
     java.net.CookieHandler.setDefault(manager); 

     myBrowser = new MyBrowser(); 
     scene = new Scene(myBrowser, 1080, 1920); 

     primaryStage.setScene(scene); 
     primaryStage.setFullScreen(true); 
     primaryStage.show(); 

     // @ being the escape character 
     scene.setOnKeyTyped(new EventHandler<KeyEvent>() { 
      @Override 
      public void handle(KeyEvent event) { 
       String text = event.getCharacter(); 
       if (text.equals("0")) { 
        String tempText = completeText; 
        completeText = ""; 
        processText(tempText); 
       }else { 
        completeText = completeText+text; 
       } 
      } 
     }); 
    } 
} 

MyBrowser:

public class MyBrowser extends Region { 

public MyBrowser() { 
     webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> { 
      if (newValue == Worker.State.SUCCEEDED) { 
       JSObject window = (JSObject) webEngine.executeScript("window"); 
       window.setMember("app", this); 
      } 
     }); 




     URL urlHello = getClass().getResource(hellohtml); 

     webEngine.load(urlHello.toExternalForm()); 
     webView.setPrefSize(1080, 1920); 
     webView.setContextMenuEnabled(false); 
     getChildren().add(webView); 
    } 

CSS代码包含动画:

#ball-container.go #ball{ 
-webkit-animation: rotating-inverse 2s ease-out 0s 1 normal; 
animation: rotating-inverse 2s ease-out 0s 1 normal; 
} 


#ball-container { 
height: 102px; 
width: 102px; 
position: absolute; 
top: -95px; 
left: 480px; 
-webkit-transition: all 0.9s ease-in-out 0s; 
transition: all 0.9s ease-in-out 0s; 
} 



#ball-container.shake .ball-wrapper{ 
-webkit-animation: yAxis 0.9s ease-in-out; 
animation: yAxis 0.9s ease-in-out; 
} 

谢谢。

+0

的你提供的代码不能编译。此外,HTML缺失。 –

+0

@OJKrylow:这段代码仅供参考,我们的动画之一。你可以尝试从网络上的任何CSS动画(我们已经做到了),并且性能很差。 –

+0

我使用https://daneden.github.io/animate.css/在64位和32位模式下测试了WebView。动画没有明显的麻烦。除了某些元素没有正确渲染外,动画看起来很好。 –

回答

1

尝试使用Java 8u112,总部设在你的代码中,我(使用Java JDK 8u112 64位测试)创建工作示例:

import javafx.application.Application; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.scene.web.WebEngine; 
import javafx.scene.web.WebView; 
import javafx.stage.Stage; 

public class Example extends Application 
{ 
    public static void main(String[] args) 
    { 
     launch(args); 
    } 

    class MyBrowser extends Parent 
    { 
     private WebEngine webEngine; 
     private WebView webView; 

     public MyBrowser() 
     { 
      webView = new WebView(); 
      webEngine = webView.getEngine(); 

      // Ugly (but easy to share) HTML content 
      String pageContents = 
        "<html>" 
         + "<head>" 
          + "<style>" 
           + "@-webkit-keyframes mymove {" 
            + "from {top: 0px;}" 
            + "to {top: 50px;}" 
           + "}" 
           + ".box { " 
            + "width: 150px; " 
            + "position: relative; " 
            + "height: 150px; " 
            + "background: red; " 
            + "margin-top: 35px; " 
            + "margin-left: auto; " 
            + "margin-right: auto; " 
            + "-webkit-transition: background-color 2s ease-out; " 
            + "-webkit-transition: all 1s ease-in-out; " 
           + "}" 
           +".box:hover {" 
            +" background-color: green;" 
            + "width:350px;" 
            + "-webkit-animation: mymove 1s infinite;" 
           +"}"   
          + "</style>" 
         + "</head>" 
         + "<body>" 
          + "<div class='box'></div>" 
         + "</body>" 
        + "</html>"; 

      webEngine.loadContent(pageContents); 
      webView.setContextMenuEnabled(false); 
      getChildren().add(webView); 
     } 
    } 

    private Scene scene; 
    MyBrowser  myBrowser; 

    @Override 
    public void start(Stage primaryStage) throws Exception 
    { 
     primaryStage.setTitle("Frontend"); 
     myBrowser = new MyBrowser(); 
     scene = new Scene(myBrowser); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 
} 

我怀疑这是因为他们现在使用的是较新的WebKit JDK-8156698但它可能有当过错误(你可以去看看8u112 bug fixes名单。

+0

会试试这个,让你知道。谢谢。 :-) –

0

我有同样的问题,使用升级Java版本1.8.0_121 webview.and固定它再现所述基于角度的Web应用程序。