css - "-fx-shape"与 "-fx-background-image"兼容吗？

Question

我想将纹理应用于自定义形状。我认为这会起作用:

.myTextureShape {
-fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z";
-fx-background-image: url("resources/texture_bg.png");
-fx-background-repeat: repeat;
}

但事实并非如此!我得到了正确的形状，但没有纹理。我的所有其他区域都正确纹理化，所以我知道语法是正确的。我想这是因为默认情况下它们是矩形的。

如果我改为使用以下样式:

.myTextureShape {
 -fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z";
 -fx-background-color: red;
}

然后我得到正确的红色背景。

如果这两个属性不兼容，我如何将纹理应用于自定义 SVG 路径形状？

P.S:我的纹理 PNG 文件是一个 10*10 的小光栅，我重复它来填充我的区域。

Answer 1

就我而言，-fx-shape 和 -fx-background-image 不能一起工作。JavaFX CSS 提供了很多样式选项......但是有一些限制，有些事情只有通过编程才能实现。 JavaFX CSS 使用 impl_setShape() 将 Region 类粗略化为定义的形状(这在 api 中已被弃用，但您仍然可以在我目前正在使用的 javafx 2.2 中尝试它) .添加背景图像会忽略形状并填充整个 Pane /区域，如果您使用 addChildren 将 ImageView 对象添加到其中，也会发生同样的情况。所以 - css 字符串不会转换成您想要的结果。

因此，我至少可以想到两种将图案应用于自定义 SVGPath 形状的方法。我将使用的是使用 ImagePattern 完成的。首先搭建这样的形状

SVGPath shape = new SVGPath();
shape.setContent("M0 0 L0 50 L25 25 L50 50 L50 0 Z");

或使用形状生成器

SVGPath shape = SVGPathBuilder.create()
    .content("M0 0 L0 50 L25 25 L50 50 L50 0 Z")
    .build();

然后将图像图案设置为填充

Image img = new Image("myjavafxapp/resources/texture_bg.png");
shape.setFill(new ImagePattern(img,0,0,10,10,false));

另一种方法是使用剪辑(将自定义形状剪辑添加到在 css 样式中设置了 -fx-background-image 的 Pane )，它看起来有点像这样

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

其中一个应该可以解决问题 - 您可以使用带纹理的背景获得形状。这等同于您对具有样式的 Region 或 Pane 类的期望

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

因此，与 Region/Pane 相比，SVGPath 形状就像所有不可调整大小的 Shape 类一样，这就是为什么我在这里将 -fx-scale-shape 属性设置为 false 的原因。你的方式是使用默认设置 - 将其设置为 true - 这使得形状填充整个父对象......我猜这也是你想要的结果。 ...现在又有多种方法可以使形状缩放到父对象。

我使用 Group 来嵌入形状并使用平移组的方法让它工作(需要在 ImagePattern 中调整图像大小，以便纹理不随形状缩放)。我正在添加一个小型工作应用程序，如果我没记错的话，我曾经在上面的示例中看到过它。 (如果你希望形状按比例缩放，你可以在 addScale 方法中使用相同的比例因子而不是 scalex 和 sclaey)

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

    }