使文本区域像记事本JavaFX

Question

如何使用CSS或代码将文本字段设置为看起来像记事本？

我试过这里说的是:

textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

但它并没有影响我的文本区域.

这是我正在寻找的:

谢谢

Answer 1

途径

为TextArea的内容部分创建线性渐变背景.

-jewelsea-lined-notepad:
    linear-gradient(
        from 0px 0px to 0px 11px,
        repeat,
        gainsboro,
        gainsboro 6.25%,
        cornsilk 6.25%,
        cornsilk
    );

实施说明

棘手的部分是线性渐变线与文本行对齐.我认为将梯度大小指定为1em(例如,每行的字体大小的1度量)会很简单,但这不允许渐变对齐.所以我只是指定了绝对像素大小的渐变(通过试验和错误找到).不幸的是,使用这种方法,当您更改文本区域的字体或字体大小时,需要手动调整渐变中的值.但除了尺寸难度之外,它似乎运作良好.

参考

• JavaFX CSS参考指南.
• modena.css - 默认的JavaFX CSS样式表.

样本输出

样品溶液

Notepad.java

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Notepad extends Application {
    @Override
    public void start(Stage stage) {
        TextArea textArea = new TextArea();
        Label title = new Label(
                "Benjamin Franklin: Selected Quotes"
        );
        title.getStyleClass().add("title");

        VBox layout = new VBox(
                10,
                title,
                textArea
        );
        layout.setPadding(new Insets(10));
        VBox.setVgrow(textArea, Priority.ALWAYS);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(getClass().getResource(
                "notepad.css"
        ).toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

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

notepad.css

.root {
    -jewelsea-lined-notepad:
        linear-gradient(
            from 0px 0px to 0px 11px,
            repeat,
            gainsboro,
            gainsboro 6.25%,
            cornsilk 6.25%,
            cornsilk
        );
}

.title {
    -fx-font-size: 16px;
}

.text-area {
    -fx-font-family: "Comic Sans MS";
    -fx-font-size: 15px;
}

.text-area .content {
    -fx-background-color: -jewelsea-lined-notepad;
}

.text-area:focused .content {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        -jewelsea-lined-notepad;
}