JavafX 和 CSS - 将节点移到最前面

Question

作为标题基本上。我在 JavaFX 中有一个节点，我想根据某些 CSS 规则将其显示在所有其他节点的前面。我不希望这种改变节点的排序，我VBox该.toFront()出现的事情。看到这个问题。

这甚至可能吗？

编辑：澄清。情况如下。我有一个VBox包含一堆紧密包装的ImageViews。当我将鼠标悬停在一个上方时，我希望它稍微变大，以给人一种图像被抬离屏幕的感觉。但是由于ImageViews 非常紧密，只有顶部边缘增长（可见）。底部边缘增长但低于下图且无法看到。

编辑 2：根据要求，这里是我正在做的事情的屏幕截图。

不同的颜色渐变是ImageViews ，当我将鼠标悬停在一个上面时，它应该随着此图像中顶部渐变的顶部边缘而增长（仔细观察 X 旁边的右上角）。然而，在此图像中也可见，此图像的底部边缘ImageView已被此图像中的下一个渐变隐藏，VBox并且增长不可见。

Answer 1

这听起来像是在 Java 9 中使用addedviewOrder属性的完美情况Node。viewOrder控制如何Node在不改变子列表中 s的顺序的情况下相对于Node相同的其他s绘制s。这是Javadoc：ParentNode

定义此节点在其父节点中的渲染和拾取顺序。

此属性用于更改其父节点中节点的渲染和选取顺序，而无需重新排序父节点的子节点列表。例如，这可以用作实现透明度排序的更有效方法。为此，应用程序可以将每个节点的 viewOrder 值分配给该节点与查看器之间的计算距离。

父级将以降序遍历其子级。这意味着具有较低 viewOrder 的孩子将在具有较高 viewOrder 的孩子之前。如果两个孩子具有相同的 viewOrder，则父母将按照他们在父母的孩子列表中出现的顺序遍历它们。

但是，viewOrder 不会改变此节点在其父节点中的布局和焦点遍历顺序。在进行布局或焦点遍历时，父项总是按顺序遍历其子项列表。

这是使用此属性的示例：

import javafx.animation.ScaleTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.ArrayList;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        var box = new HBox(createRectangles(Color.DARKBLUE, Color.FIREBRICK, 25));
        box.setAlignment(Pos.CENTER);
        box.setPadding(new Insets(50, 20, 50, 20));
        primaryStage.setScene(new Scene(box));
        primaryStage.show();
    }

    private Rectangle[] createRectangles(Color start, Color end, int count) {
        var list = new ArrayList<Rectangle>(count);
        for (double i = 0; i < count; i++) {
            var rect = new Rectangle(30, 60, start.interpolate(end, i / count));

            var scaleTrans = new ScaleTransition(Duration.millis(250), rect);
            scaleTrans.setFromX(1.0);
            scaleTrans.setFromY(1.0);
            scaleTrans.setToX(1.2);
            scaleTrans.setToY(1.2);

            rect.setOnMouseEntered(e -> {
                scaleTrans.stop(); // <--- doesn't seem necessary*
                scaleTrans.setRate(1.0);
                rect.setViewOrder(-1.0);
                scaleTrans.play();
            });
            rect.setOnMouseExited(e -> {
                scaleTrans.stop(); // <--- doesn't seem necessary*
                scaleTrans.setRate(-1.0);
                rect.setViewOrder(0.0);
                scaleTrans.play();
            });
            // *the "stop()"'s don't seem to be necessary. When I commented
            // them out the animation still worked. In fact, the animation
            // actually seems smoother in the situation where you move the
            // mouse over and then away quickly (before the zoom-in completes).

            list.add(rect);
        }
        return list.toArray(new Rectangle[0]);
    }

}

它使用Rectangles 而不是ImageViews 但概念是相同的。当鼠标悬停在 a 上时，Rectangle它会将视图顺序设置为低于其他顺序，然后播放 aScaleTransition以使其更大。当鼠标退出时，它会将视图顺序重置回0，然后反转ScaleTransition.

注意：我使用了varJava 10 中添加的关键字。

这是示例的 GIF 动图：

编辑：由于您提出了 CSS，我去检查是否可以从样式表设置视图顺序。而且它似乎可以。查看CSS 参考指南，为Nodenamed定义了一个 CSS 属性-fx-view-order。