Comment créer style de bordure personnalisée en JavaFX CSS?

Je voudrais créer le style de bordure semblable à predifened "en pointillés" style
(-fx-border-style: dashed).

Comment créer bordure pointillée dans le CSS avec des longueurs personnalisées du tableau de bord des segments, l'extrémité d'une ligne et la ligne de jointure?

border: 2px dashed bleu; eh Bien, c'est la largeur dépend de la div(ou autre élément) pour lequel vous l'utilisez.

OriginalL'auteur krsi | 2015-05-23

css javafx

Voir le JavaFX CSS de référence pour Région, en particulier les valeurs possibles pour -fx-border-style. Vous pouvez utiliser segments(...) pour définir la ligne arbitraire des longueurs de segments, il existe aussi des paramètres pour line-cap (square, butt, ou round) et line-join (miter, bevel, ou round).

Exemple rapide:

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);
    }
}

avec

personnalisé-tirets-frontière.css:

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

qui donne

Comment créer style de bordure personnalisée en JavaFX CSS?

Comment je peux ajouter une bordure à une seule fois la direction? comme la frontière-gauche, border-right etc?

OriginalL'auteur James_D

1

Lire la JavaFX 8 CSS Guide de Référence pour les Régions, qui offre pas mal de fonctionnalités, telles que les frontières en pointillés. Essentiellement, c'est la plupart des choses que vous obtenez à partir de HTML de style CSS border spécifications (bien évidemment un peu différent, car il utilise une JavaFX noms d'attribut et ne peut mettre en œuvre toute la spécification CSS HTML, navigateur). Remarque: le niveau de personnalisation ne fait pas tout vous demander personnalisés en pointillés la longueur de la frontière, les lignes (autant que je puisse en dire).

Si cela ne suffisait pas, placez votre nœud dans un StackPane avec un Rectangle sur le dessus du nœud, lier le rectangle de la taille du nœud de la taille et le style du Rectangle avc CSS.

Malheureusement je n'ai pas le temps de fournir un exemple complet d'ici et maintenant, mais un rapide (complètement non testé) de l'échantillon serait:
```
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);
```
L'exemple ici est juste pour une taille fixe nœud, mais si vous avez une taille variable de nœud, vous pouvez utiliser la liaison à garder la superposition de la taille du rectangle en synchronisation avec le nœud sous-jacent.

Où votre CSS est quelque chose comme:
```
.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;
}
```
Les définitions de CSS pour les paramètres de contour pour les formes sont définies dans le La forme de la section de la JavaFX 8 CSS guide de Référence.

Noter également, cette approche n'est pas limitée à des zones rectangulaires, il fonctionnera aussi bien pour les formes arbitraires.

OriginalL'auteur jewelsea

Vous devez vous connecter pour publier un commentaire.