效果链接-javafx中effect.setInput的CSS等效项 [英] Effect chaining - CSS Equivalent for effect.setInput in javafx

问题描述

我需要通过CSS应用多种效果(主要是innershadow和dropshadow).但是我无法链接这些效果.
是否有此链接.它表示有关修补程序的内容，但没有有关如何使用链接的详细信息.
编辑:如果不清楚，请进一步说明:
要通过CSS施加效果，请使用-fx-effect.我需要对同一节点应用多种效果.如何在CSS中链接"这些效果?通过使用前面提到的setInput()的代码可以轻松完成此操作. TIA

I need to apply multiple effects ( mainly innershadow and dropshadow ) through CSS. But I'm not able to chain these effects.
Is there CSS equivalent for setInput() of javafx.scene.effect.Effect? So far I found only this link. It indicates something about fixes but no details about how to use chaining.
EDIT: Further explanation if question is not clear:
to apply effect through css, -fx-effect is used. I need to apply multiple effects to same node. How to "chain" these effects in CSS? This can be easily done through code using setInput() mentioned earlier. TIA

推荐答案

如@Lorand所述，不可能通过CSS链接效果.

As @Lorand mentions, it's not possible to chain effects via CSS.

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

He also gives the link of a well known example of chaining effects via code.

我将使用相同的示例比较结果，以提供FXML解决方案.

I'll provide a solution with FXML, using that same example to compare results.

通过(更新的)代码:

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

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

Note that the effects are defined in reverse order of application. For the sake of clarity, we could also write this:

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

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

Now let's use Scene Builder 2.0 to create an FXML file circle.fxml.

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

Once we have the circle, we set the DropShadow effect, and then we edit the effect, and select Replace Effect Input option from the menu button:

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

Then choose InnerShadow, define the effect, and select again Replace Effect Input, selecting again InnerShadow:

定义效果，保存并退出.这将是源代码:

Define the effect, save and exit. This will be the source code:

<?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>

最后，将此文件加载到我们的场景中:

Finally, loading this file in our scene:

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

这将是结果:

这篇关于效果链接-javafx中effect.setInput的CSS等效项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！