JavaFX：将矩形转换为多边形

Question

I wish to convert a rectangle to a polygon when a user tries to click on one of the edges and drags it around the scene. I started to do a simple implementation of this using the following code, but it seems that there is no way I can get to(at-least in my knowledge) the edges of the rectangle/polygon to facilitate this operation. Any inputs on this would be appreciated.

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;

class DrawPane extends Pane
{
public DrawPane(final Polygon poly)
{
    poly.setFill(Color.BEIGE);
    poly.setStroke(Color.CHARTREUSE);
    poly.setStrokeWidth(1);

    setDragHandler(poly);

    getChildren().addAll(poly);
}

private double dragDeltaX, dragDeltaY;

private void setDragHandler(final Polygon poly)
{
    poly.setOnMousePressed(new EventHandler<MouseEvent>()
    {
        @Override
        public void handle(MouseEvent mouseEvent)
        {
            dragDeltaX = poly.getLayoutX()
                - mouseEvent.getSceneX();
            dragDeltaY = poly.getLayoutY()
                - mouseEvent.getSceneY();
        }
    });

    poly.setOnMouseDragged(new EventHandler<MouseEvent>()
    {
        @Override
        public void handle(MouseEvent mouseEvent)
        {
            poly.setRotate(dragDeltaX
                + dragDeltaY);
            poly.setCursor(Cursor.MOVE);
        }
    });

    poly.setOnMouseEntered(new EventHandler<MouseEvent>()
    {
        @Override
        public void handle(MouseEvent mouseEvent)
        {
            poly.setCursor(Cursor.HAND);
        }
    });

    poly.setOnMouseReleased(new EventHandler<MouseEvent>()
    {
        @Override
        public void handle(MouseEvent mouseEvent)
        {
            poly.setCursor(Cursor.HAND);
        }
    });
}
}


public class Rectangle2Polygon extends Application
{
@Override
public void start(Stage stage)
{

    Polygon poly = new Polygon(10, 10, 100, 10, 100, 100, 10, 100);

    stage.setScene(new Scene(new DrawPane(poly), 450, 300));
    stage.show();
}

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

Answer 1

You can use this approach:

1. Split rectangle into vertices and sides
2. Code vertices draggable
3. Make sides bound to vertices

I wrote a small demo based on the default Ensemble example :

https://gist.github.com/sgrinev/9238167

You can drag the vertices of this "rectangle" to achieve something like this: