Per quanto mi riguarda, -fx-shape e -fx-background-image non funzionano insieme. JavaFX CSS offre molte opzioni di stile ... tuttavia ci sono alcune limitazioni e alcune cose sono possibili solo con la programmazione. JavaFX CSS usa impl_setShape() per rendere grezza la classe Region alla forma definita (che è market deprecata nell'api ma è ancora possibile provarla in javafx 2.2 - che sto usando al momento). L'aggiunta dell'immagine di sfondo ignora la forma e riempie l'intero riquadro/area, lo stesso accade se si utilizza addChildren per aggiungere oggetti ImageView al suo interno. Quindi - la stringa css non si tradurrà nel risultato che vorresti.
Quindi posso pensare almeno a 2 modi di applicare un modello a una forma SVGPath personalizzata. Quello che userei è fatto con ImagePattern. In primo luogo costruire la forma come questo
SVGPath shape = new SVGPath();
shape.setContent("M0 0 L0 50 L25 25 L50 50 L50 0 Z");
o utilizzando Crea forme
SVGPath shape = SVGPathBuilder.create()
.content("M0 0 L0 50 L25 25 L50 50 L50 0 Z")
.build();
e quindi impostare il modello di immagine come riempire
Image img = new Image("myjavafxapp/resources/texture_bg.png");
shape.setFill(new ImagePattern(img,0,0,10,10,false));
Un'alternativa sarebbe usare clipping (l'aggiunta di una clip forma personalizzata in un pannello con -fx-background-image impostato nello stile css), che sarebbe un po 'come questo
Pane test = new Pane();
test.setStyle(" -fx-background-image: url(\"myjavafxapp/res/index.jpeg\");");
SVGPath shape = new SVGPath();
shape.setContent("M0 0 L0 50 L25 25 L50 50 L50 0 Z");
test.setClip(shape);
Uno di questi dovrebbe fare il trucco: si ottiene la forma con lo sfondo con texture. Questo è l'equivalente di quello che ci si aspetta da una classe Regione o Pane con stile
.myTextureShape {
-fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z";
-fx-scale-shape: false;
-fx-background-image: url("myjavafxapp/resources/texture_bg.png");
-fx-background-repeat: repeat;
}
Così la forma SVGPath è come tutte le classi Forma nonresizable, a differenza di Regione/Pane, questo è il motivo per cui ho impostato qui il -fx-scale-shape attributo a falso. Il modo in cui lo avevi era con l'impostazione di default - che lo imposta su true - che fa riempire la forma dell'intero oggetto genitore ... da cui suppongo che questo sarebbe anche il risultato desiderato. ... ora ci sono ancora diversi modi per rendere la scala della forma all'oggetto padre.
Ho ottenuto il lavoro utilizzando il gruppo per incorporare la forma e con un metodo di traduzione del gruppo (la dimensione dell'immagine deve essere regolata in ImagePattern, in modo che la trama non si riduca con la forma). Sto aggiungendo una piccola app di lavoro, che ho visto nell'esempio sopra se ricordo tutto correttamente.(Se si desidera la forma per scalare in modo proporzionale, si utilizza lo stesso fattore di scala, invece di scaleX e sclaey nel metodo addScale)
package myjavafxapp;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.SVGPath;
import javafx.scene.shape.SVGPathBuilder;
import javafx.scene.image.Image;
import javafx.scene.paint.*;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
/**
* @author martint
*/
public class MyJavaFXApp extends Application {
private final static String svg = "M0 0 L0 50 L25 25 L50 50 L50 0 Z";
private SVGPath shape;
private Image img;
private Pane resizePane;
private Group shapeGroup;
private Node content;
@Override
public void start(final Stage primaryStage) {
//build the SVGPath shape
shape = SVGPathBuilder.create().content(svg).build();
img = new Image("myjavafxapp/res/index.jpeg");
resizePane = new Pane();
shapeGroup = new Group();
resizePane.getChildren().add(shapeGroup);
StackPane root = new StackPane();
root.getChildren().add(resizePane);
Scene scene = new Scene(root, 200, 200);
primaryStage.setScene(scene);
primaryStage.show();
//fill node content
content = nodeCont();
shapeGroup.getChildren().add(content);
//resizing listening
resizePane.widthProperty().addListener(new ChangeListener<Number>(){
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
addScaling();
}});
resizePane.heightProperty().addListener(new ChangeListener<Number>(){
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
addScaling();
}});
Platform.runLater(new Runnable() {
@Override
public void run() {
addScaling();
}
});
}
private Node nodeCont() {
Group cont = new Group();
cont.getChildren().add(shape);
return cont;
}
private void addScaling() {
shapeGroup.getTransforms().clear();
//shape boundary
double cx = content.getBoundsInParent().getWidth();
double cy = content.getBoundsInParent().getHeight();
//resizePane boundary
double px = resizePane.getWidth();
double py = resizePane.getHeight();
//if pane set
if (px > 0.0 && py > 0.0) {
//scale
double scalex = px/cx;
double scaley = py/cy;
//center
double centerx = 0.5 * (px - cx*scalex);
double centery = 0.5 * (py - cy*scaley);
//transform
shapeGroup.getTransforms().add(new Translate(centerx, centery));
shapeGroup.getTransforms().add(new Scale(scalex, scaley));
shape.setFill(new ImagePattern(img,0,0,10/scalex,10/scaley,false));
}
}
public static void main(String[] args) {
launch(args);
}
}
funziona se non si imposta '-fx-shape' e lasciare solo come un rettangolo? – Hbcdev
Sì, senza -fx-shape l'immagine di sfondo viene applicata all'intero rettangolo. – Pigelvy
Link tracker di problemi: [RT-28825 -fx-shape non compatibile con -fx-background-image] (http://javafx-jira.kenai.com/browse/RT-28825) – jewelsea