resizing a substraction shape

问题

I would like to resize the below created shape. but cannot get it. The project is to create a transparent rectangle to show only a part of the desktop, and hide the rest. The transparent zone is the result of a substraction, and I need to make it resizable by the user.

I tryed several ways, such as adapting from this : https://gist.github.com/jewelsea/1441960

But couldn't get it.

Here is my code :

@Override
public void start(Stage stage) {
    Group group = new Group();
    Rectangle rect = new Rectangle(0, 0, 350, 300);
    Rectangle clip = new Rectangle(20, 20, 200, 200);
    clip.setArcHeight(15);
    clip.setArcWidth(15);

    Shape shape = Shape.subtract(rect, clip);

    shape.setFill(Color.GRAY);
    group.getChildren().add(shape);
    Scene scene = new Scene(group);
    scene.setFill(Color.TRANSPARENT);
    stage.initStyle(StageStyle.TRANSPARENT);
    stage.setScene(scene);
    stage.show();
}

Any link or help would be appreciated.

回答1:

If you create a Shape by Shape.subtract(...), you don't have any mechanism to change the properties of it afterwards (in the sense of changing the bounds of the shapes that were used to create it). You would have to remove the shape from its parent, recompute the rect and clip, recompute the shape, and add the new shape back into the scene.

It might be better to use a Path here so that you can manipulate the coordinates without creating a new shape every time. Traverse one way (say clockwise) around the outside (filled portion), and then the other way (anti-clockwise) around the inner (transparent portion). The resulting shape will be the same as a subtraction of the inner portion from the outer portion. The initial setup will potentially require considerably more code, but you can then manipulate the coordinates as you need to.

I'm not sure exactly what functionality you were looking for, but the following allows you to drag the inner portion around by clicking and dragging on it, and allows you to move the whole window by clicking and dragging on the outer portion. It should be enough for you to figure out what you need. I didn't include the nice rounded corners you had in your example, but you can fairly easily implement those using ArcTo path elements.

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.binding.DoubleBinding;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.value.ObservableDoubleValue;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.ClosePath;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.PathElement;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class TransparentRectangle extends Application {


    @Override
    public void start(Stage stage) {

        Pane root = new Pane();

        PathElement start = new MoveTo(0, 0);
        PathElement outerTopRight = createBoundLineTo(root.widthProperty(), 0);
        PathElement outerBottomRight = createBoundLineTo(root.widthProperty(), root.heightProperty());
        PathElement outerBottomLeft = createBoundLineTo(0, root.heightProperty());
        PathElement outerTopLeft = new LineTo(0, 0);

        DoubleProperty innerLeft = new SimpleDoubleProperty(20);
        DoubleProperty innerTop = new SimpleDoubleProperty(20);
        DoubleBinding innerRight = innerLeft.add(180);
        DoubleBinding innerBottom = innerTop.add(180);

        PathElement innerTopLeft = createBoundLineTo(innerLeft, innerTop);
        PathElement innerTopRight = createBoundLineTo(innerRight, innerTop);
        PathElement innerBottomRight = createBoundLineTo(innerRight, innerBottom);
        PathElement innerBottomLeft = createBoundLineTo(innerLeft, innerBottom);

        Path path = new Path(
                start, outerTopRight,
                outerBottomRight, outerBottomLeft,
                outerTopLeft, 
                innerTopLeft, innerBottomLeft, 
                innerBottomRight, innerTopRight,
                innerTopLeft, new ClosePath()
        );


        path.setFill(Color.GRAY);
        path.setStroke(Color.TRANSPARENT);
        root.getChildren().add(path);

        class Wrapper<T> { T value ; }
        Wrapper<Point2D> mouseLocation = new Wrapper<>();

        // Drag on gray portion of path - move entire window:
        path.setOnDragDetected(event -> {
            mouseLocation.value = new Point2D(event.getScreenX(), event.getScreenY());
        });
        path.setOnMouseDragged(event -> {
            if (mouseLocation.value != null) {
                stage.setX(stage.getX() + event.getScreenX() - mouseLocation.value.getX());
                stage.setY(stage.getY() + event.getScreenY() - mouseLocation.value.getY());
                mouseLocation.value = new Point2D(event.getScreenX(), event.getScreenY());
            }
        });
        path.setOnMouseReleased(event -> mouseLocation.value = null);


        // Drag on scene (i.e not on path, i.e. on transparent part) - move transparent part
        root.setOnDragDetected(event -> {
            mouseLocation.value = new Point2D(event.getScreenX(), event.getScreenY());
        });
        root.setOnMouseDragged(event -> {
            if (mouseLocation.value != null) {
                innerLeft.set(innerLeft.get() + event.getScreenX() - mouseLocation.value.getX());
                innerTop.set(innerTop.get() + event.getScreenY() - mouseLocation.value.getY());
                mouseLocation.value = new Point2D(event.getScreenX(), event.getScreenY());
            }
        });
        root.setOnMouseReleased(event -> mouseLocation.value = null);

        // No close button on a transparent window, so exit on double click:
        root.setOnMouseClicked(event -> {
            if (event.getClickCount() == 2) Platform.exit();
            event.consume();
        });

        Scene scene = new Scene(root, 800, 600);

        scene.setFill(Color.TRANSPARENT);
        stage.initStyle(StageStyle.TRANSPARENT);
        stage.setScene(scene);
        stage.show();
    }

    private PathElement createBoundLineTo(ObservableDoubleValue x, ObservableDoubleValue y) {
        LineTo lineTo = new LineTo();
        lineTo.xProperty().bind(x);
        lineTo.yProperty().bind(y);
        return lineTo ;
    }

    private PathElement createBoundLineTo(double fixedX, ObservableDoubleValue y) {
        LineTo lineTo = new LineTo();
        lineTo.setX(fixedX);
        lineTo.yProperty().bind(y);
        return lineTo ;
    }

    private PathElement createBoundLineTo(ObservableDoubleValue x, double fixedY) {
        LineTo lineTo = new LineTo();
        lineTo.setY(fixedY);
        lineTo.xProperty().bind(x);
        return lineTo ;
    }

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

来源：https://stackoverflow.com/questions/26254354/resizing-a-substraction-shape

标签

java

javafx

shapes