2

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);
}
}
2
  • what exactly do you want to achieve? Rectangle should change form during dragging? Or being replaced with a polygon? Feb 26, 2014 at 13:29
  • Sorry for being ambiguous in my question. What is desired is that lets say a user clicks on an edge of the rectangle, an additional vertex is created and the user should be able to drag this new point to adjust the new shape(polygon in this case) according to his needs. Please let me know if more clarification is needed. So in short, to answer your doubt, the rectangle should change shape during dragging.
    – Aspirant
    Feb 26, 2014 at 14:11

1 Answer 1

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:

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.