JavaFX的：动画，它使用PathTransition作为绘图笔 [英] JavaFX: animation which uses PathTransition as a drawing pen

问题描述

样code

//node 
Rectangle rect = new Rectangle (0, 0, 20, 20);

//path
Text text = TextBuilder.create()
                       .text("J a v a F X   R o c k s")
                        .font(new Font(50))
                        .x(65)
                        .y(100)
                        .build();
// path transition
 pathTransition = PathTransitionBuilder.create()
                .duration(Duration.seconds(15))
                .path(text)
                .node(rect)
                .orientation(OrientationType.ORTHOGONAL_TO_TANGENT)
                .cycleCount(Timeline.INDEFINITE)
                .autoReverse(true)
                .build();

我要显示的文字（路径）的一部分旅行了RECT节点。上图中的含义矩形节点游历，直到java的，我想只有在那个时间点显示部分。

I want to display part of the the text(path) that traveled by rect node. Meaning in the above figure as rect node traveled until java, i want to be display that part only at that point of time ..

推荐答案

可以试着剪切区域分配给文本和动画时更新：

You can try to assign a clipping area to the Text and update it during animation:

public void start(Stage primaryStage) {
    final Rectangle pen = new Rectangle(0, 0, 20, 20);

    // this pane this contain clipping
    final Pane clip = new Pane();

    // listener to update clipping area
    ChangeListener changeListener = new ChangeListener() {
        @Override
        public void changed(ObservableValue ov, Object t, Object t1) {
            Rectangle newrect = new Rectangle(pen.getTranslateX(), pen.getTranslateY(), pen.getWidth(), pen.getHeight());
            newrect.setRotate(pen.getRotate());
            clip.getChildren().add(newrect);
        }
    };

    // rect coordinates will be changed during animation, so we will listen to them
    pen.translateXProperty().addListener(changeListener);
    pen.translateYProperty().addListener(changeListener);
    pen.rotateProperty().addListener(changeListener);

    final Text text = TextBuilder.create()
            .text("J a v a F X   R o c k s")
            .font(new Font(50))
            .clip(clip)
            .x(65)
            .y(100)
            .build();

    PathTransition pathTransition = PathTransitionBuilder.create()
            .duration(Duration.seconds(15))
            .path(text)
            .node(pen)
            .orientation(OrientationType.ORTHOGONAL_TO_TANGENT)
            .build();

    // once we done we don't want to store thousands of rectangles used to clip
    pathTransition.setOnFinished(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            text.setClip(null);
            clip.getChildren().clear();
        }
    });

    Pane root = new Pane();
    root.getChildren().addAll(text, pen);

    primaryStage.setScene(new Scene(root, 600, 200));
    primaryStage.show();
    pathTransition.play();
}

一个位更有效的方式来存储剪裁区域可以是画布对象，但是它会需要一些数学来绘制矩形与画布旋转的，所以它是你的电话

A bit more efficient way to store clipping area can be Canvas object, but it will require a bit of math to draw rectangles with rotation on canvas, so it's your call.

这篇关于JavaFX的：动画，它使用PathTransition作为绘图笔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！