javafx实现游戏对话框功能

目标效果：对话内容逐字显示，鼠标按下时跳过显示内容。

效果图如下：

设计思路：

从图中不难看出该对话框包含3部分：1、黑色背景框。2、灰色背景带白色边框的内容显示框。3、内容文本。

背景框之类的不难实现，这里不多说，不明白的可以看源码。

内容逐字显示怎么实现呢？

1、定义显示内容、以及显示文本框Text，javafx中文本框自动换行用setWrappingWidth实现。

2、定义IntegerProperty对象charCount，初始值为0。

3、用Timeline定义3秒内完成内容显示长度,结束时charCount值为显示内容长度。

4、为charCount添加ChangeListener事件，当charCount的值发生变化时改变文本框显示内容。

代码如下：

    public void create() {
        IntegerProperty charCount = new SimpleIntegerProperty();
        KeyFrame startFrame = new KeyFrame(Duration.ZERO, new KeyValue(
                charCount, 0));
        KeyFrame endFrame = new KeyFrame(Duration.seconds(3), new KeyValue(
                charCount, content.length()));
        timeline.getKeyFrames().addAll(startFrame, endFrame);
        bgRect.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                timeline.playFromStart();
            }
        });
        final Text displayedText = TextBuilder.create()
                .x(boundingRect.getX() + MARGIN)
                .y(boundingRect.getY() + MARGIN)
                .wrappingWidth(boundingRect.getWidth() - MARGIN * 2)
                .font(new Font(36)).textOrigin(VPos.TOP).fill(Color.WHITE)
                .effect(new DropShadow()).build();
        charCount.addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable,
                    Number oldValue, Number newValue) {
                String textToDisplay = content.substring(0, newValue.intValue());
                displayedText.setText(textToDisplay);
            }
        });
        getChildren().addAll(bgRect, boundingRect, displayedText);
        timeline.play();
    }

源码下载...

更多源码...

转载于:https://www.cnblogs.com/javafx/archive/2012/11/11/2764158.html