"-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-pathed-shape？

PS:我的纹理PNG文件,是一个小的10*10光栅,我重复填充我的区域.

Answer 1

就我而言-fx-shape,-fx-background-image不要一起工作.JavaFX CSS提供了许多样式选项......但是有一些限制,有些东西只能通过编程实现.JavaFX CSS用于impl_setShape()将Region类粗略定义为已定义的形状(在api中市场已弃用,但您仍可以在javafx 2.2中尝试它 - 我目前正在使用它).添加背景图像会忽略形状并填充整个窗格/区域,如果使用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 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; 
}

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

我知道了使用组嵌入的形状和与平移基的方法(所需要的图像大小在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);
            }

    }

Answer 2

通过css将背景纹理应用于自定义形状的可能性是JavaFX 2.2(Java 7)的平台错误.

在Java 8中,平台错误是固定的.

示例css:

/** 
 * file textured-shape.css
 * place in same directory as TexturedShape.java and ensure build system copies 
 * this file to the build output directory.
 */
.textured-shape {
  /** (a square with the bottom triangle chunk taken out of it) */
  -fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z";
  -fx-background-image: url('http://icons.iconarchive.com/icons/tooschee/misc/128/Present-icon.png');
  /** 
   * Image license:  
   *   CC Attribution-Noncommercial 3.0 http://creativecommons.org/licenses/by-nc/3.0/
   *   Buy commercial license here: http://tooschee.com/portfolio?worksCategory=icons
   */
}

示例应用:

import static javafx.application.Application.launch;
import javafx.application.*;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class TexturedShape extends Application {
  @Override public void start(Stage stage) {
    Pane pane = new Pane();
    pane.setPrefSize(128, 128);
    pane.getStyleClass().add("textured-shape");

    Scene scene = new Scene(pane);
    scene.getStylesheets().add(
      getClass().getResource("textured-shape.css").toExternalForm()
    );
    stage.setScene(scene);
    stage.show();
  }

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

在Java 7上运行示例代码,形状不会应用于背景纹理:

在Java 8b80上运行相同的示例代码,形状将应用于背景纹理: