Erstellen von benutzerdefinierten Rahmen Stil in JavaFX-CSS?

Ich würde gern border-style ähnlich predifened "gestrichelt" - Stil
(-fx-border-style: dashed).

Wie erstellen gestrichelte Grenze in CSS mit custom-Längen von dash-Segmente, line cap und line beitreten?

border: 2px dashed blue; Nun, es ist die Breite hängt von der div(oder ein anderes element), für die Sie es verwenden.

InformationsquelleAutor krsi | 2015-05-23

Sehen die JavaFX-CSS-Referenz für das Region, insbesondere die möglichen Werte für -fx-border-style. Sie können segments(...) zu definieren, die beliebige line-segment-Längen: es gibt auch Einstellungen für line-cap ( square , butt oder round) und line-join ( miter , bevel oder round).

Kurzes Beispiel:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CustomBorderExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Region region = new Region();
        region.getStyleClass().add("custom-dashed-border");
        region.setMinSize(400, 400);
        StackPane root = new StackPane(region);
        root.setPadding(new Insets(16));
        Scene scene = new Scene(root, 480, 480);
        scene.getStylesheets().add("custom-dashed-border.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

mit

custom-gestrichelt-Grenze.css:

.custom-dashed-border {
    -fx-border-color: blue ;
    -fx-border-width: 5 ; 
    -fx-border-style: segments(10, 15, 15, 15)  line-cap round ;
}

gibt

Erstellen von benutzerdefinierten Rahmen Stil in JavaFX-CSS?

Wie kann ich einen Rand hinzufügen, um nur einmal die Richtung? wie border-left, border-right usw.?

InformationsquelleAutor James_D

1

Lesen Sie die JavaFX 8 CSS Reference Guide für Regionen, die sich bietet einiges an Funktionalität, wie gestrichelte Grenzen. Im wesentlichen ist es die meisten Sachen, Sie bekommen von HTML-style-CSS-border-Angaben (obwohl natürlich ein bißchen anders, als es nutzt JavaFX Attribut-Namen, und kann nicht implementieren die vollständige CSS-Spezifikation, dass ein HTML-browser). Hinweis: dieses level der Anpassung nicht alles tun, was Sie verlangen, wie benutzerdefinierte gestrichelte Länge der Grenzlinien (soweit ich das sagen kann).

Wenn das nicht genug ist, legen Sie Ihre Knoten in ein StackPane mit einem Rechteck auf der Oberseite der Knoten, binden Sie das Rechteck mit der Größe der Knoten die Größe und den Stil der Rechteck Schlaganfall CSS.

Leider habe ich nicht die Zeit haben, bieten ein umfassendes Beispiel jetzt hier, aber eine kurze (völlig ungetestet) Beispiel:
```
ImageView image = new ImageView(new Image("http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/128/Amazon-Kindle-icon.png"))
Rectangle border = new Rectangle(0, 0, image.getWidth(), image.getHeight());
border.getStyleClass().add("dashed-border");
StackPane borderedImage = new StackPane(image, border);
```
Das Beispiel hier ist nur für eine Feste Größe der Knoten, aber wenn Sie eine variable-sized-Knoten können Sie die Bindung zu halten, die overlay-Rechteck-Größe synchron mit dem darunter liegenden Knoten.

Wo die CSS ist so etwas wie:
```
.dashed-border {
    -fx-fill: transparent;
    -fx-stroke: green;
    -fx-stroke-width: 5;
    -fx-stroke-dash-array: 12 2 4 2;
    -fx-stroke-dash-offset: 6;
    -fx-stroke-line-cap: butt;
}
```
Den CSS-Definitionen für die Schlaganfall-Einstellungen für die Formen definiert sind, in der Form-Abschnitt der JavaFX 8 CSS Reference guide.

Beachten Sie auch, dieser Ansatz beschränkt sich nicht nur auf rechteckige Flächen, es funktioniert auch für beliebige Formen.

InformationsquelleAutor jewelsea

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.