如何調整多邊形的尺寸？

Question

我的任務是制作一張笑臉，當窗口調整大小時，該笑臉適合邊框。 我可以得到所有其他形狀來執行此操作，但是當我嘗試使用多邊形時，我不知道如何執行此操作。 因此，如果我可以在如何調整javafx.node.shape.Shape包中的多邊形大小方面有所幫助，那就太好了。

與往常一樣，感謝您的及時幫助，如果我違反了許多規則，我深感抱歉。

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.layout.Pane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Circle;
    import javafx.stage.Stage;
    import javafx.scene.shape.Polygon;
    import javafx.scene.shape.Ellipse;
    import javafx.scene.shape.*;

    public class smiley extends Application{
      @Override // Override the start method in the Application class
      public void start(Stage primaryStage) {
        Pane pane = new Pane();
        // Create a circle and set its properties
        Circle circle = new Circle();
        circle.centerXProperty().bind(pane.widthProperty().divide(2));
        circle.centerYProperty().bind(pane.heightProperty().divide(2)); 
        circle.setRadius(50);
        circle.setStroke(Color.BLACK);
        circle.setFill(null);

        Polygon nose = new Polygon();
        nose.getPoints().addAll(new Double[]{ 100.0, 90.0, 90.0, 120.0, 110.0, 120.0 });
        nose.setStroke(Color.BLACK);
        nose.setFill(null);

        Ellipse leftEye = new Ellipse();
        leftEye.centerXProperty().bind(pane.widthProperty().divide(2).add(20));
        leftEye.centerYProperty().bind(pane.heightProperty().divide(2).subtract(20));
        leftEye.setRadiusX(15.0f);
        leftEye.setRadiusY(10.0f);
        leftEye.setStroke(Color.BLACK);
        leftEye.setFill(null);

        Ellipse rightEye = new Ellipse();
        rightEye.centerXProperty().bind(pane.widthProperty().divide(2).subtract(20));
        rightEye.centerYProperty().bind(pane.heightProperty().divide(2).subtract(20));
        rightEye.setRadiusX(15.0f);
        rightEye.setRadiusY(10.0f);
        rightEye.setStroke(Color.BLACK);
        rightEye.setFill(null);

        Circle leftPupil = new Circle();
        leftPupil.centerXProperty().bind(pane.widthProperty().divide(2).add(20));
        leftPupil.centerYProperty().bind(pane.heightProperty().divide(2).subtract(20));
        leftPupil.setRadius(7);
        leftPupil.setStroke(Color.BLACK);

        Circle rightPupil = new Circle();
        rightPupil.centerXProperty().bind(pane.widthProperty().divide(2).subtract(20));
        rightPupil.centerYProperty().bind(pane.heightProperty().divide(2).subtract(20));
        rightPupil.setRadius(7);
        rightPupil.setStroke(Color.BLACK);

        Arc smile = new Arc();
        smile.centerXProperty().bind(pane.widthProperty().divide(2));
        smile.centerYProperty().bind(pane.heightProperty().divide(2).add(20));
        smile.setRadiusX(25.0f);
        smile.setRadiusY(10.0f);
        smile.setStartAngle(180.0f);
        smile.setLength(180.0f);
        smile.setType(ArcType.OPEN);
        smile.setFill(null);
        smile.setStroke(Color.BLACK);

        pane.getChildren().add(circle);
        pane.getChildren().add(nose);
        pane.getChildren().add(leftEye);
        pane.getChildren().add(rightEye);
        pane.getChildren().add(leftPupil);
        pane.getChildren().add(rightPupil);
        pane.getChildren().add(smile);

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 200, 200);
        primaryStage.setTitle("Assignment 14"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage


      }
    } 

Answer 1

從您的代碼來看，您似乎不是在談論笑臉隨着舞台的增長/收縮，而是隨着舞台大小的調整而停留在舞台中央。 除多邊形鼻子外，所有笑臉都可以這樣做。 鼻子不這樣做的原因是，您已經使用固定在場景根部的窗格的坐標系使用點​​定義了多邊形。 如果您確實希望調整臉部大小而不只是移動臉部，那么您的方法將涉及相同概念的稍有不同的應用，尤其是方法2的應用 。

我可以想到兩種方法來實現讓鼻子隨着臉部其他部分移動的目標，我將按喜好順序列出我的方法：

方法1：專為臉部設計的窗格。 並不是讓每個笑臉的子部分都定義其相對於整個場景的位置，而是讓所有笑臉的部分都相對於一個窗格來定義其位置，該窗格恰好足以容納笑臉的外圓。 然后，定義該窗格相對於場景根窗格的位置。

我更喜歡這種方法的原因是它具有更好的封裝。 例如，如果您以后決定要讓整個笑臉在屏幕上移動，則只需定義代碼即可移動容器窗格，而不是移動所有單獨的部分。 同樣，添加新片段僅需要在該窗格的坐標系中進行操作，因此您不必考慮確保其在整個場景中正確移動。

僅將臉部圓添加到此類smileyPane示例代碼段。 多邊形和其余部分留作練習:-)

    //This pane is the root of the scene, and stretches with the
    //stage. It will hold the smileyPane.
    Pane rootPane = new Pane();

    double smileyRadius = 50.0;

    //This pane is just big enough to hold the outer circle of
    //the smiley face. It holds all the individual pieces that 
    //make up the face.
    Pane smileyPane = new Pane();
    rootPane.widthProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            double smileyPaneStartX = (newValue.doubleValue()/2)-(smileyRadius); 
            smileyPane.setLayoutX(smileyPaneStartX);
        }
    });

    rootPane.heightProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            double smileyPaneStartY = (newValue.doubleValue()/2)-(smileyRadius); 
            smileyPane.setLayoutY(smileyPaneStartY);
        }
    });

方法2：用於重新計算鼻子位置的外部窗格尺寸的偵聽器。 基本上，您定義了一些代碼，只要外部窗格的大小發生變化，就可以運行這些代碼，以便可以重新計算鼻子/多邊形的正確位置。

  Polygon nose = new Polygon();
  nose.setStroke(Color.BLACK);
  nose.setFill(null);

  //Add initial nose position points
  nose.getPoints().addAll(new Double[]{ 100.0, 90.0, 90.0, 120.0, 110.0, 120.0 });
  pane.widthProperty().addListener(new ChangeListener<Number>(){
    @Override
    public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        //The overall pane width changed. Recalculate the position of nose points
        //Actual position calculation left as exercise.
    }
  });

  //Similar thing needs to be done with height. Left as exercise.

---

我遺漏了一些內容，有意省略了整個解決方案。 這顯然是功課。 這應該足以讓您入門，但是希望您可以自己填寫內容來學習一些東西！