13

I am having a weird issue with JavaFX. I designed a simple Scene in SceneBuilder. The text looks ok in a preview, but in the running the app the text looks blurred, consider the following image. example Here is the FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="br.mviccari.javafxtest.controllers.TelaMensagemController">
  <children>
    <TitledPane alignment="CENTER_LEFT" animated="false" collapsible="false" contentDisplay="LEFT" prefHeight="400.0" prefWidth="600.0" text="Janela legal" textAlignment="LEFT" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <content>
        <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
          <children>
            <HBox id="HBox" alignment="CENTER" spacing="5.0" AnchorPane.bottomAnchor="14.0" AnchorPane.rightAnchor="14.0">
              <children>
                <Button mnemonicParsing="false" onAction="#acaoFodase" prefHeight="53.9609375" prefWidth="128.0" text="Foda-se" />
                <Button mnemonicParsing="false" onAction="#acaoOk" prefHeight="53.9609375" prefWidth="128.0" text="OK" />
              </children>
            </HBox>
            <TextArea fx:id="campoTexto" disable="false" editable="true" focusTraversable="true" prefHeight="278.0" prefWidth="570.0" rotate="0.0" text="Aqui vai um texto padrão motherfucker!" wrapText="true" AnchorPane.bottomAnchor="82.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="12.0" AnchorPane.topAnchor="14.0" />
          </children>
        </AnchorPane>
      </content>
    </TitledPane>
  </children>
</AnchorPane>

And here is the application class code:

FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/br/mviccari/javafxtest/layouts/telaMensagem.fxml"));
Parent root = fxmlLoader.load();
TelaMensagemController controller = fxmlLoader.getController();
controller.setParametroDeTeste("PIKACHU EU ESCOLHO VC!");
controller.init();
Stage stage = new Stage(StageStyle.DECORATED);
stage.initModality(Modality.WINDOW_MODAL);
stage.initOwner(labelStatus.getScene().getWindow());
stage.setOpacity(1);
stage.setTitle("My New Stage Title");
stage.setScene(new Scene(root, 450, 450));
stage.showAndWait();

I have tried to run the app using JDK 7, this way the text is not blurred anymore, but how can I run it with JDK 8 showing a normal text

I have put my project on bitbucket, if anyone tries to see the code or checkout to your machine, you can see this on your own

https://mateusviccari@bitbucket.org/mateusviccari/testejavafx.git

DVarga
  • 21,311
  • 6
  • 55
  • 60
Mateus Viccari
  • 7,389
  • 14
  • 65
  • 101
  • Are you on a HiDPI screen? What version of Java are you using? – Appleshell May 19 '14 at 01:35
  • no it's not a hiDPI screen, java -version = 1.8.0. Actually, i forgot to mention it before, but the two image samples that i put in the question were taken on the same machine. – Mateus Viccari May 19 '14 at 01:44

6 Answers6

16

I have figured out a solution for this issue. I was able to ascertain that the issue is centered around a bug introduced in JavaFX 8 which causes some blurriness of the content displayed within a ScrollPane when said ScrollPane has decimal value constraints, the bug has to do with the cached image of the content so turning off caching works. TextAreas make use of ScrollPanes.

textArea.setCache(false);
ScrollPane sp = (ScrollPane)textArea.getChildrenUnmodifiable().get(0);
sp.setCache(false);
for (Node n : sp.getChildrenUnmodifiable()) {
    n.setCache(false);
}
Tryder
  • 246
  • 2
  • 5
  • 4
    Nice catch, tnaks! I tried running this on initialization of the control, but it seems the ScrollPane isn't ready at that point yet. I had to wrap it in Platform.runLater([...]) to work correctly. – gsnerf Jun 22 '16 at 13:40
4

If someone has a similar problem inside PopOver from ControlsFX: Blurred text inside text controls (WebView, TextArea, etc).

The solution is to override the -fx-stroke-width attribute inside the .popover > .border selector:

.popover > .border { -fx-stroke-width: 1; }

Example: 

val popOver = PopOver()
val webView = WebView()
webView.engine.loadContent("<html>Some text that should be not blurred</html>")
popOver.contentNode = webView
popOver.root.stylesheets.add(this.javaClass.getResource("test.css").toString())


var b = Button("Press")
val scene = Scene(StackPane(b), 800.0, 600.0)

b.onAction = EventHandler { popOver.show(b) }

primaryStage.scene = scene
primaryStage.show()

enter image description here

DVarga
  • 21,311
  • 6
  • 55
  • 60
1

As it has been pointed out, the decimal value constraints cause the blurry text. Thus, setting padding of the scroll Pane to 0 is also enough to make text non-blurry.

This css will fix the issue:

.text-area > .scroll-pane {
    -fx-padding: 0;
}
KiloByte
  • 93
  • 1
  • 9
  • My Javafx WebView suffered from blurry text and elements e.g. buttons etc. Turns out the solution is to find the nearest parent pane and set its style to "-fx-padding: 0" which can be done either via SceneBuilder (in the inspector for e.g. AnchorPane go to Properties / Style - and add the style entry ) or via code e.g. `anchorPaneWebview1.setStyle("-fx-padding: 0”)` – abulka Jul 23 '23 at 03:57
0

I can't say why the text is blur, maybe it is because of the font used, or styles applied. But that difference in your image is coming from the different versions of JavaFX used in. SceneBuilder is using the JavaFX 2 while executed one is using javaFX 8. Configure your Java environment to use the same version.

Determine the version used like as:

primaryStage.setTitle(com.sun.javafx.runtime.VersionInfo.getRuntimeVersion());

On my Windows 8 machine the text in text area shown as follow without blurring. Note the version numbers in titles: enter image description here

Uluk Biy
  • 48,655
  • 13
  • 146
  • 153
  • The version shown is 8.0.0-b132, same as yours. I have tried it on a windoes 7 machine in my work, also with the same runtime version as my home pc (home pc uses runs 8) – Mateus Viccari May 19 '14 at 14:08
  • I have tried switching to JDK 7 and this way the text is shown without blur... Bot how to show it like this with JDK 8? – Mateus Viccari May 19 '14 at 14:17
  • @MateusViccari. Are you applying any styles? Is the blurring effect shown only in textarea or other controls (textfield, label etc) as well? – Uluk Biy May 19 '14 at 14:27
  • No styles applied, the blurry effect happens only with TextArea. – Mateus Viccari May 19 '14 at 17:08
0

I had a similar issue with the blurry text. Using JavaFX Scene Builder, I noticed that under Layout: Position, I had Layout X / Y a non zero value (like 9.893739 etc). when I replaced those with 0, the blurry text went away.

RobinFago
  • 189
  • 2
  • 6
0

The related bug JDK-8211294 is fixed now in OpenJfx16 release, although I still see same problem with text areas at Dpi scaling level > 100%

My current scaling level is 125% and even the treeView and ListViews were also blurry, So at least I could fix them, by turning OFF 'Cache' and 'Snap To Pixel'. And it worked like charm.

Arun Sharma
  • 31
  • 4
  • turning OFF 'Cache' and 'Snap To Pixel' <- How to do that? – Damn Vegetables Jan 27 '22 at 21:24
  • In Fxml file, add below properties. (You can easily do this using SceneBuilder UI) scaleShape="false" cacheShape="false"snapToPixel="false" For scrollpane, In some places, I also had to use the following for better results - scrollPane.lookup(".viewport").setCache(false); I saved it as a method and call it on all the scrollPanes and this takes out all the blurriness – Arun Sharma Jan 29 '22 at 13:37