效果链 - 等效于 javafx 中 effect.setInput 的 CSS答案

【问题标题】：Effect chaining - CSS Equivalent for effect.setInput in javafx效果链 - 等效于 javafx 中 effect.setInput 的 CSS
【发布时间】：2014-12-04 12:15:49
【问题描述】：

我需要通过 CSS 应用多种效果（主要是内阴影和阴影）。但我无法链接这些效果。
javafx.scene.effect.Effect 的setInput() 是否有等效的 CSS？到目前为止，我只找到了this 链接。它指出了一些关于修复的信息，但没有关于如何使用链接的详细信息。
编辑：如果问题不清楚，请进一步解释：
要通过 css 应用效果，使用 -fx-effect。我需要对同一个节点应用多种效果。如何在 CSS 中“链接”这些效果？这可以通过使用前面提到的 setInput() 的代码轻松完成。 TIA

【问题讨论】：

你的意思是不是这样的：box-shadow: inset 0 2px 6px #000, 0 2px 6px #000;
已编辑问题以供进一步解释

标签： css javafx javafx-8

【解决方案1】：

目前在 Java 7 和 Java 8 中都无法通过 CSS 链接效果或应用多个效果。请参阅Oracle CSS Documentation。

CSS vs Code 文章中也提到过。

【讨论】：

【解决方案2】：

正如@Lorand 提到的，不可能通过 CSS 链接效果。

他还给出了一个众所周知的通过代码链接效果示例的链接。

我将使用 FXML 提供一个解决方案，并使用相同的示例来比较结果。

通过（更新）代码：

@Override
public void start(Stage primaryStage) throws IOException { 
    Circle circle = new Circle(64,64,48);
    Paint fill = new LinearGradient(0, 0, 0, 1, 
                                true, CycleMethod.NO_CYCLE,
                                new Stop(0.0, Color.rgb(207, 0, 58)),
                                new Stop(1.0, Color.rgb(129, 0, 33)));
    circle.setFill(fill);
    circle.setStroke(null);
    InnerShadow innerShadow = new InnerShadow(BlurType.GAUSSIAN,Color.color(0, 0, 0, 0.65),5,0,0,-5);
    InnerShadow innerGlow = new InnerShadow(BlurType.GAUSSIAN,Color.color(1, 1, 1, 0.65),5,0,0,5);
    innerGlow.setInput(innerShadow);

    DropShadow dropShadow = new DropShadow(BlurType.GAUSSIAN, Color.color(0, 0, 0, 0.65), 5, 0, 0, 0);
    dropShadow.setInput(innerGlow);

    circle.setEffect(dropShadow);

    VBox vBox = new VBox(circle);
    vBox.setAlignment(Pos.CENTER);
    Scene scene = new Scene(vBox,200,200,Color.web("#a9a9a9"));
    primaryStage.setTitle("Chain effect by code");
    primaryStage.setScene(scene);
    primaryStage.show();
}

请注意，效果是按应用的相反顺序定义的。为了清楚起见，我们也可以这样写：

circle.setEffect(dropShadow);
dropShadow
    .setInput(innerGlow);
    innerGlow
        .setInput(innerShadow);

现在让我们使用 Scene Builder 2.0 创建一个 FXML 文件circle.fxml。

一旦我们有了圆圈，我们设置DropShadow 效果，然后我们编辑效果，并从菜单按钮中选择Replace Effect Input 选项：

然后选择InnerShadow，定义效果，再选择Replace Effect Input，再选择InnerShadow：

定义效果，保存退出。这将是源代码：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.paint.*?>
<?import java.lang.*?>
<?import javafx.scene.shape.*?>

<VBox alignment="CENTER" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Circle radius="48.0" stroke="TRANSPARENT" strokeType="INSIDE" strokeWidth="1.0">
         <fill>
            <LinearGradient endX="0.0" endY="1" proportional="true" startX="0" startY="0">
               <stops>
                  <Stop color="#cf003a" offset="0.0" />
                  <Stop color="#810021" offset="1.0" />
               </stops>
            </LinearGradient>
         </fill>
         <effect>
             <DropShadow blurType="GAUSSIAN" color="#000000a6" radius="5.0">
               <input>
                  <InnerShadow blurType="GAUSSIAN" color="#ffffffa6" offsetY="5.0" radius="5.0">
                     <input>
                        <InnerShadow blurType="GAUSSIAN" color="#000000a6" offsetY="-5.0" radius="5.0" />
                     </input>
                  </InnerShadow>
               </input>
            </DropShadow>
         </effect>
      </Circle>
   </children>
</VBox>

最后，在我们的场景中加载这个文件：

@Override
public void start(Stage primaryStage) throws IOException { 
    VBox vBox = FXMLLoader.load(getClass().getResource("circle.fxml"));

    Scene scene = new Scene(vBox,200,200,Color.web("#a9a9a9"));
    primaryStage.setTitle("Chain effect by FXML");
    primaryStage.setScene(scene);
    primaryStage.show();
}

这将是结果：

【讨论】：