我正在设计网页,因为我必须在圆路径中旋转圆弧。我没有使用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>
您需要使用控制器。在控制器中,需要使用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
。