在FXML中将渐变应用于圆

时间:2016-01-08 16:22:19

标签: javafx javafx-8 fxml

是否可以将(例如)Circle包含在LinearGradient中,反之亦然只包含在FXML中?

我想象这样的事情:

<BorderPane prefWidth="800" prefHeight="600" xmlns:fx="http://javafx.com/fxml">
...
    <center>
        <Circle fx:id="circle" centerX="400" centerY="300" stroke="#9922ff" radius="150">
            <LinearGradient ...>

            </LinearGradient>
        </Circle>
    </center>
...
</BorderPane>

渐变应仅适用于圆圈而不应用于其他任何内容。我想在演示文稿中展示这个例子。

修改 詹姆斯给了我一个很好的提示,但我真正需要的是接管以下代码:

private Circle createCircle() {
    LinearGradient gradient = new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE,
            new Stop(0, Color.web("#ffffff")),
            new Stop(0.5, Color.web("#9922ff")),
            new Stop(1, Color.web("#ffffff")));

    Circle circle = new Circle(150, gradient);
    circle.centerXProperty().set(400);
    circle.centerYProperty().set(300);
    circle.setStrokeType(StrokeType.OUTSIDE);
    circle.setStroke(Color.web("#9922ff", 0.5));
    circle.setStrokeWidth(20);

    return circle;
}

我也有这个圈子的动画,但这对FXML来说没什么,这对我来说很清楚。 :)有人知道如何完全使用渐变int FXML吗?

1 个答案:

答案 0 :(得分:4)

您发布的Java代码的FXML等价物

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

<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.paint.LinearGradient?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.paint.Stop?>

<BorderPane xmlns:fx="http://javafx.com/fxml/1">
    <center>
        <Circle fx:id="circle" centerX="400" centerY="300" stroke="#9922ff"
            radius="150">
            <fill>
                <LinearGradient startX="0.0" startY="1.0" endX="1.0"
                    endY="0.0" proportional="true" cycleMethod="NO_CYCLE">
                    <stops>
                        <Stop offset="0">
                            <color>
                                <Color red="1.0" green="1.0" blue="1.0" />
                            </color>
                        </Stop>
                        <Stop offset="0.5">
                            <color>
                                <Color red="0.6" green="0.133" blue="1.0" />
                            </color>
                        </Stop>
                        <Stop offset="1.0">
                            <color>
                                <Color red="1.0" green="1.0" blue="1.0" />
                            </color>
                        </Stop>
                    </stops>
                </LinearGradient>
            </fill>
        </Circle>
    </center>
</BorderPane>

虽然我同意问题之后的评论,但这可能在CSS中做得更好。

相关问题