JavaFx在文本區域組件上繪製線條

Question

是否可以在文本區域組件上繪製一組線條，如圖所示。

然後，我需要能夠輸入他們的文字。這些行也需要被擦除和重繪

Answer 1

您可能想看看使用TextArea的background財產。

 new TextArea().setBackground(new Background(new BackgroundImage(myImage,BackgroundRepeat.NO_REPEAT,BackgroundRepeat.NO_REPEAT,BackgroundPosition.CENTER,BackgroundSize.DEFAULT))); 

此處的代碼假設您可以將這些行作爲圖像。

你可以找到背景這裏更多的信息：https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Background.html

如果您希望背景圖像變化，是動態的，您目前的需求，你有兩個選擇。

1. 只需在整個項目中使用Canvas即可。首先將線條繪製到畫布上，然後在其上繪製字母。這可能會更好，因爲它可以讓你自定義你的項目，但是你需要更多的代碼和想法。

2. 使用TextArea，併爲BackgroundImage使用另一個畫布的快照。您可以使用畫布根據需要繪製線條，然後使用Snapshot將其轉換爲圖像。

WritableImage i = canvas.snapshot(new SnapshotParameters(), null);

然後，使用這張圖片，你可以將其用作文本區的使用BackgroundImage背景。

Answer 2

考慮在Pane像這樣畫線：

public class StageTest extends Application{ 

    private static final double WIDTH = 100, HEIGHT = 60; 

    @Override 
    public void start(Stage stage) throws Exception { 

     stage.setTitle("Test Stage"); 
     Label label = new Label("Some text "); 
     label.setStyle("-fx-background-color:TRANSPARENT"); 
     label.setAlignment(Pos.CENTER); 
     label.setPrefSize(WIDTH, HEIGHT); 

     Pane linesPane = getPane(label); 
     StackPane root = new StackPane(linesPane, label); 

     Scene scene = new Scene(root); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    private Pane getPane(Label label) { 

     Pane pane = new Pane(); 
     pane.setStyle("-fx-background-color:WHITE"); 
     Line blueLine = new Line(); 
     blueLine.setStroke(Color.BLUE); 
     blueLine.startXProperty().bind(label.layoutXProperty()); 
     blueLine.startYProperty().bind(label.layoutYProperty().add(label.heightProperty().multiply(.333))); 
     blueLine.endXProperty().bind(label.layoutXProperty().add(label.widthProperty())); 
     blueLine.endYProperty().bind(label.layoutYProperty().add(label.heightProperty().multiply(.333))); 

     Line redLine = new Line(); 
     redLine.setStroke(Color.RED); 
     redLine.startXProperty().bind(label.layoutXProperty()); 
     redLine.startYProperty().bind(label.layoutYProperty().add(label.heightProperty().multiply(.666))); 
     redLine.endXProperty().bind(label.layoutXProperty().add(label.widthProperty())); 
     redLine.endYProperty().bind(label.layoutYProperty().add(label.heightProperty().multiply(.666))); 

     pane.getChildren().addAll(blueLine, redLine); 

     return pane; 
    } 


    public static void main(String[] args) { 
     launch(args); 
    } 
}