JavaFX "Blueprint" CSS Background

[ToBJo]

Hallo zusammen,

Ich habe in JavaFX einen Editor für einen speziellen Anwendungsfall. Dieser braucht jetzt einen neuen Hintergrund. Aktuell wird das Ganze über ein Hintergrundbild gelöst. Das soll aber abgelöst werden und rein mit CSS gerendert werden.

Ich habe einen "regulären" CSS3 Code im Internet gefunden der mir ein Blueprint, also ein Millimeterpapier, in HTML erstellt. Leider bekomme ich diesen unter JavaFX mit dem -fx prefix nicht zum laufen. aus background-image habe ich background-color gemacht aber die Gradient Funktionen scheinen in JavaFX anders zu sein. Aus der Doku werde ich leider auch nicht so richtig schlau. Hat jemand eine Idee?

Hier der originale CSS Code:

.blueprint{
background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}

Vlt. hat jemand eine andere Idee, wie ich das mit CSS umsetzten kann? ???:L:bahnhof:

Gruß Tobias

 

[Foxei]

Ich würde dir empfehlen es wieder mit einem Bild zum machen diese aber von Java selber Zeichnen zu lassen. Wenn es nur um ein blaues bild mit weißen Linien geht ist das nicht wirklich aufwändig. und Solange du es nicht mit jedem repaint neu erstellt sondern einmal abspeicherst nicht mal Performance mäßig relevant.
Wenn du daran interessiert bist kann ich dir sowas schreiben.

 

[ToBJo]

Hallo Foxei,

an ein Canvas Hintergrund habe ich auch schon einmal gedacht, da es aber ein skalierbares Pane, was auch noch sehr oft neu gerendert wird, ist versuche ich die Performance zu maximieren. Sprich jede Millisekunde zählt. 🙂
Ich habe mit viel Geduld und probieren das gewünschte Ergebnis in CSS fast hinbekommen, ich denke bis nächste Woche funktioniert es wie ich es mir vorstelle.
Danke für deine Hilfe, die Lösung poste ich dann noch wenn alles passt.

Gruß

 

[Foxei]

Okay

 

[dzim]

Also strengenommen hält sich JavaFX streng an die Syntax von CSS3, was Gradienten und so angeht, führen nur ihr etwas irreführendes -fx-Prefix an.

Ich würde das ganze aber eventuell auch eher per Background-Image lösen, bei dem du dir ein 1x1cm-Quadrat vorbereitest und mit CSS-Mitteln über den Hintergrund verteilst:

.my-editor-background {
-fx-background-image: url('<path-to-img-relative-from-the-css>');
-fx-background-size: cover;
-fx-background-repeat: no-repeat;
/* and so on */
}

Bsp aus dem Netz: Edit fiddle - JSFiddle
(html - How to make a grid (like graph paper grid) with just css? - Stack Overflow)