Question

我正在开发一个简单的应用程序，它有一个饼图。我的目标是，如果用户将鼠标悬停在图表的任何部分上，它将会扩展并显示更多信息。在我的程序中，图表由3个弧组成。这是我的代码。

 import javafx.scene.Group; //Maybe too many imports, I just use em all
 import javafx.scene.Scene; //because I'm lazy
 import javafx.stage.Stage;
 import javafx.util.Duration;
 import javafx.scene.paint.Color; 
 import javafx.scene.shape.Arc; 
 import javafx.scene.shape.Rectangle;
 import javafx.event.EventHandler;
 import javafx.event.ActionEvent;
 import javafx.event.Event;
 import javafx.application.Application; 
 import javafx.scene.shape.*;
 import javafx.scene.shape.Line;
 import javafx.scene.text.Text;
 import javafx.scene.text.Font;
 import javafx.scene.text.FontWeight;
 import javafx.scene.input.MouseEvent;
 import javafx.animation.ScaleTransition;
 import java.lang.Thread;

public class AnimatingDemo extends Application{
    public static void main(String[] args) {
        launch(args);
    }
    @Override
    public void start(Stage stage) {
      //create 3 arc variables
      Arc arc1 = new Arc();
      Arc arc2 = new Arc();
      Arc arc3 = new Arc();
          //set up arc1 in place and to right color
      arc1.setFill(Color.rgb(35,25,43,1.0));
      arc1.setCenterX(250);
      arc1.setCenterY(250);
      arc1.setRadiusX(100.0f);
      arc1.setRadiusY(100.0f);
      arc1.setStartAngle(315);
      arc1.setLength(-90);
      arc1.setType(ArcType.ROUND);
      //set up and color arc2
      arc2.setFill(Color.rgb(39,70,144,1.0));
      arc2.setCenterX(250);
      arc2.setCenterY(250);
      arc2.setRadiusX(100.0f);
      arc2.setRadiusY(100.0f);
      arc2.setStartAngle(90);
      arc2.setLength(-135);
      arc2.setType(ArcType.ROUND);
      //set up and color arc3
      arc3.setFill(Color.rgb(54,65,86,1.0));
      arc3.setCenterX(250);
      arc3.setCenterY(250);
      arc3.setRadiusX(100.0f);
      arc3.setRadiusY(100.0f);
      arc3.setStartAngle(225);
      arc3.setLength(-135);
      arc3.setType(ArcType.ROUND);

      //create root group
      Group root = new Group();
      //set up window
      //add nodes to root
      root.getChildren().addAll(arc1,arc2,arc3);
      Scene scene = new Scene(root, 500,500);
      stage.setTitle("Testing arc animation");
      stage.setScene(scene);
      stage.show();
    }
}

这只是我制作的一个示例，因此我可以重新创建问题，但它得到了重点。我在Javafx中研究过各种动画方法。动画类似乎最可行，所以我在我的程序中尝试过。我使用了以下代码：

  arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new   EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {
            ScaleTransition st = new ScaleTransition(Duration.millis(1500),arc1);
            st.setByX(0.3);
            st.setByY(0.3);
            st.setCycleCount(1);
            st.setAutoReverse(false);
            st.play();

        }
  });

我为每个弧重复了3次，但这里多余了。

无论如何，结果是弧的两端都缩放，因此pi图看起来很乱并且不再居中，缩放也会根据弧的大小而增加，因此它不一致。

然后我决定使用thread.sleep（）继续使用更基本的方法。

  arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {
            for(int a = 0; a < 10; a++) {
                try {
                    arc1.setRadiusX(arc1.getRadiusX() + 1);
                    arc1.setRadiusY(arc1.getRadiusY() + 1);
                    Thread.sleep(100);
                }
                catch(InterruptedException e) {
                    e.printStackTrace();
                }
            }

        }
  });

这也不起作用，圆圈会立即按照我想要的单位数量（立即）扩展。

所以我的问题是，我该怎么办？有没有一种方法可以防止动画类中的偏移？我能以某种方式使thread.sleep动画流畅吗？任何建议都有帮助，谢谢你的时间！

P.S。如果需要更多评论请告诉我

Answer 1

我不确定这正是您所寻找的，因为您使用的是Arc而不是PieChart，但我使用了{{1}我做了你所做的一切，并且工作得很好。

在这里，我参加了PieChart课程并制作了三个单独的课程，仅供测试。

我在PieChart.Data变量上调用EventFilter添加了.getNode()，然后粘贴了您在上面提供的方法。

同样，我认为您使用PieChart.Data代替Arc是有原因的，但我让它以这种方式工作。

PieChart

如何在Javafx中为弧线设置动画

1 个答案: