CODEWITHSUNDEEP
javafxjavafx-8
venkataramireddy pulikhandam
venkataramireddy pulikhandam

Reputation: 9

How to rotate the arc with in the Circle1 path continuously?

I am designing the web pages for that I have to rotate the arc in the circle path. I don't have previous experience in javafx. How do I rotate the Arc in the circle?

<?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>

Upvotes: 1

Views: 713

Answers (1)

fabian
fabian

Reputation: 82531

You need to use a controller. In the controller you need to animate the startAngle property of the Arc using a Timeline.

Note: I recommend using centerX and centerY instead of the layout properties. Furthermore wrapping a AnchorPane inside another currently isn't necessary, even more so since you're not using any anchors. A simple Pane would do the trick.

<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>

The arc radius is calculated as outerRadius - strokeWidth/2 = (circle1.radius - circle1.strokeWidth) - arc.strokeWidth / 2, i.e. in this case (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();
    }

}

For counter-clockwise animation add 360 instead of subtracting it for the KeyValue of the second KeyFrame.

Upvotes: 2

Related Questions