Как вращать дугу в контуре Circle1 по контуру? - PullRequest
Новая
       15

Как вращать дугу в контуре Circle1 по контуру?

0 голосов
/ 28 сентября 2018

Я разрабатываю веб-страницы, для которых мне нужно повернуть дугу по траектории круга.Я не знаю предыдущий опыт я javafx.Пожалуйста, помогите мне, как повернуть дугу по кругу?

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

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <children>
      <AnchorPane prefHeight="666.0" prefWidth="645.0">
         <children>
            <Circle fx:id="circcle2" fill="#f700001d" layoutX="323.0" layoutY="298.0" radius="50.0" stroke="#f50000" strokeType="INSIDE" strokeWidth="2.0" />
            <Circle fx:id="circle1" fill="#f110000d" layoutX="323.0" layoutY="298.0" radius="70.0" stroke="#ea0202" strokeType="INSIDE" strokeWidth="2.0" />
            <Arc fx:id="arc" fill="#ff252100" layoutX="314.0" layoutY="284.0" length="70.0" radiusX="50.0" radiusY="50.0" startAngle="96.0" stroke="#f20000" strokeLineCap="BUTT" strokeWidth="10.0" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

1 Ответ

0 голосов
/ 28 сентября 2018

Вам нужно использовать контроллер.В контроллере необходимо анимировать свойство startAngle Arc, используя Timeline.

Примечание: Я рекомендую использовать centerX и centerY вместосвойства макета.Кроме того, оборачивать AnchorPane внутри другого в данный момент не нужно, тем более что вы не используете якоря.Простой Pane справился бы с задачей. 

<Pane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="mypackage.Controller"
      prefHeight="666.0" prefWidth="645.0">
   <children>
       <Circle fx:id="circcle2" fill="#f700001d" centerX="323.0" centerY="298.0" radius="50.0" stroke="#f50000" strokeType="INSIDE" strokeWidth="2.0" />
       <Circle fx:id="circle1" fill="#f110000d" centerX="323.0" centerY="298.0" radius="70.0" stroke="#ea0202" strokeType="INSIDE" strokeWidth="2.0" />
       <Arc fx:id="arc" fill="#ff252100" centerX="323.0" centerY="298.0" length="70.0" radiusX="63.0" radiusY="63.0" startAngle="96.0" stroke="#f20000" strokeLineCap="BUTT" strokeWidth="10.0" />
   </children>
</Pane>

Радиус дуги рассчитывается как outerRadius - strokeWidth/2 = (circle1.radius - circle1.strokeWidth) - arc.strokeWidth / 2, т.е. в этом случае (70 - 2) - 10/2 = 63. 

package mypackage;

import javafx.fxml.FXML;
import javafx.animation.Animation;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.scene.shape.Arc;
import javafx.util.Duration;

public class Controller {

    @FXML
    private Arc arc;

    @FXML
    private void initialize() {
        Timeline animation = new Timeline(
            new KeyFrame(Duration.ZERO, new KeyValue(arc.startAngleProperty(), arc.getStartAngle(), Interpolator.LINEAR)),
            new KeyFrame(Duration.seconds(2), new KeyValue(arc.startAngleProperty(), arc.getStartAngle() - 360, Interpolator.LINEAR))
        );
        animation.setCycleCount(Animation.INDEFINITE);
        animation.play();
    }

}

Для против часовой стрелкианимацию добавьте 360 вместо вычитания ее для KeyValue второго KeyFrame.

...