JavaFX 中的旋转 ImageView

Question

我正在尝试用旋转来做旧的收音机旋钮，而旋转是我的问题。当鼠标光标在旋钮上时 - 一切正常，但是当鼠标离开旋钮区域时，一切都无法正常工作。这是我的旋钮代码。
编辑：我想通过左右移动来旋转旋钮。我对上下移动不感兴趣。
EDIT2：问题不仅仅发生在旋钮区域。我认为这取决于光标移动距离。

@FXML
void onFrequencyKnobMouseMove(MouseEvent mouseEvent) {
    double vX = (mouseEvent.getX() - deltaX);
    System.out.println("VX: " + vX);

    double rotation = frequencyKnob.getRotate() + vX;
    if(rotation > 180) rotation=180;
    if(rotation < -180) rotation=-180;
    frequencyKnob.setRotate(rotation);
    System.out.println("ROTATION: " + rotation);

    tuningLine.setLayoutX(rotation*1.33+250);

    deltaX = mouseEvent.getX();
    System.out.println("DELTAX: " + deltaX + "\n\n");
}


@FXML
void onFrequencyKnobMouseDown(MouseEvent mouseEvent) {
    deltaX = mouseEvent.getX();
    //System.out.println(deltaX);
}

FXML 文件

<ImageView fx:id="frequencyKnob" layoutX="856.0" layoutY="29.0" onMouseDragged="#onFrequencyKnobMouseMove" onMousePressed="#onFrequencyKnobMouseDown">
    <image>
        <Image url="@knob.png" />
    </image>
</ImageView>

Answer 1

您已将 MouseEvent 的处理程序添加到 ImageView。通过此事件对象可用的坐标位于旋转的 ImageView 的坐标系中。您应该改为使用保持未修改的坐标系中的坐标。最简单的方法是使用 sceneX 属性而不是 MouseEvent 的 x 属性或转换为父坐标系。

例子

@Override
public void start(Stage primaryStage) {
    Image image = new Image("knob.png");
    ImageView imageView = new ImageView(image);
    
    StackPane root = new StackPane(imageView);
    imageView.setPreserveRatio(true);
    imageView.setFitWidth(300);
    imageView.setFitHeight(300);
    
    Scene scene = new Scene(root, 500, 500);

    class MovedHandler implements EventHandler<MouseEvent> {
        
        double startX;
        double startRotate;
        
        @Override
        public void handle(MouseEvent event) {
            Point2D pt = imageView.localToParent(event.getX(), event.getY());
            double x = pt.getX();
            double newRotate = 3 * (x - startX) + startRotate;
            imageView.setRotate(newRotate);
        }
        
    }
    
    MovedHandler handler = new MovedHandler();
    imageView.setOnMouseDragged(handler);
    imageView.setOnMousePressed(event -> {
        Point2D pt = imageView.localToParent(event.getX(), event.getY());
        handler.startX = pt.getX();
        handler.startRotate = imageView.getRotate();
    });

    primaryStage.setScene(scene);
    primaryStage.show();
}

JavaFX 中的旋转 ImageView

Rotation ImageView in JavaFX

javafx

rotation

imageview

例子