将图片放入圆形视图 [英] Put a image in a circle view

问题描述

如何加载任何图像并将其置于圆形视图中，并且用户可以用鼠标将其圆形视图中的图像拖动到所需的方向.有什么控制可以做到这一点.我尝试并使用了一个充满图像的圆，但是我无法在其中移动图像，也无法在其中选择视口.有什么主意吗?

How to load any image and put it in a circle view and user with his mouse can drag the image in its circle view to his desired orientation. What control is there to do this. I tried and used a Circle filled with the imge but I cant move the image inside it nor i can select a view port in it. Any idea?

推荐答案

使用setClip(...)选择一个视口". 您需要自己进行拖动.

Use setClip(...) to choose a "viewport". You need to implement the dragging yourself.

类似这样的东西:

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.event.EventHandler;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class ImageInCircleExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        final Pane root = new Pane();
        final ImageView imageView = new ImageView("http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/640px-Sunset_2007-1.jpg");
        final Circle clip = new Circle(300, 200, 200);
        imageView.setClip(clip);
        root.getChildren().add(imageView);

        // enable dragging:
        final ObjectProperty<Point2D> mouseAnchor = new SimpleObjectProperty<>();
        imageView.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                mouseAnchor.set(new Point2D(event.getSceneX(), event.getSceneY()));
            }
        });
        imageView.setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                double deltaX = event.getSceneX() - mouseAnchor.get().getX();
                double deltaY = event.getSceneY() - mouseAnchor.get().getY();
                imageView.setLayoutX(imageView.getLayoutX() + deltaX);
                imageView.setLayoutY(imageView.getLayoutY() + deltaY);
                clip.setCenterX(clip.getCenterX() - deltaX);
                clip.setCenterY(clip.getCenterY() - deltaY);
                mouseAnchor.set(new Point2D(event.getSceneX(), event.getSceneY()));
            }
        });

        final Scene scene = new Scene(root, 600, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

这篇关于将图片放入圆形视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！