Warum JavaFX Kontrollen verwischt und wie man es repariert?

Question

Ich habe diese einfache Form der JavaFX-Anwendung mit zwei TextArea- ohne Stileigenschaften:

Wenn das Formular sehen ich sehen:

FXML Code hier:

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

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


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <TitledPane animated="false" prefWidth="300.0" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <content> 
      <TextArea prefHeight="200.0" prefWidth="200.0" /> 
     </content> 
     </TitledPane> 
     <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="300.0" AnchorPane.topAnchor="0.0"> 
     <items> 
      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> 
       <children> 
        <TitledPane animated="false" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
        <content> 
         <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"> 
          <children> 
           <TextArea prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-10.0" AnchorPane.leftAnchor="-10.0" AnchorPane.rightAnchor="-10.0" AnchorPane.topAnchor="-10.0" /> 
          </children> 
         </AnchorPane> 
        </content> 
        </TitledPane> 
       </children> 
      </AnchorPane> 
      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0" /> 
     </items> 
     </SplitPane> 
    </children> 
</AnchorPane> 

Der Text in der ersten TextArea verschwommen. Warum es passiert und wie man es repariert?

Answer 1

Das Problem tritt auf, wenn Sie diese Kombination verwenden: TitledPane -> AnchorPane (Es spielt keine Rolle, welche Elemente in die AnchorPane eingebettet). Wenn Sie das AnchorPane Constraints-Tool verwenden, erhalten verschachtelte Elemente Artefakte der Werte von Width, Height, LayoutBounds, BoundsInLocal und BoundsInParent. Diese Artefakte beeinflussen die Unschärfe.

Keine Constraints:

Es gibt Constraints:

Für die Lösung des Problems nicht verwenden Kombination TitledPane-> AnchorPane oder Werkzeug AnchorPane Einschränkungen nicht verwenden.

Answer 2

Sie haben die TextArea im SplitPane in einem anderen AnchorPane eingeschlossen. Wenn Sie löschen, ist die Unschärfe verschwunden. Ich weiß nicht warum, aber ich könnte es mit diesem Code arbeiten lassen.

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

<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" 
      prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <TitledPane animated="false" prefWidth="300.0" text="test2" AnchorPane.bottomAnchor="0.0" 
       AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <TextArea prefHeight="200.0" prefWidth="200.0"/> 
    </TitledPane> 
    <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" 
       AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="300.0" 
       AnchorPane.topAnchor="0.0"> 
     <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> 
      <TitledPane animated="false" text="test" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" 
         AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
        //deleted AnchorPane here 
        <TextArea prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-10.0" 
           AnchorPane.leftAnchor="-10.0" AnchorPane.rightAnchor="-10.0" 
           AnchorPane.topAnchor="-10.0"/> 
      </TitledPane> 
     </AnchorPane> 
     <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"/> 
    </SplitPane> 
</AnchorPane>