JavaFX Problem beim Zeichnen eines Dreiecks in einem GUI

[732E772E]

Ich benutze NetBeans 8.1 und den Scene Builder, um ein GUI mit JavaFX und FXML zu erstellen. Es soll ein Dreieck gezeichnet werden, das später beliebig verschoben und rotiert werden kann. Bei letzterem bin ich aber noch nicht. Bis jetzt habe ich noch ein Problem damit das Dreieck überhaupt zu zeichnen. Dazu hier der komplette Quellcode meiner App:

NewFXMain.java:

package grafikprogramm_dreieck;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Point2D;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class NewFXMain extends Application {

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

    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("FXMLDocument.fxml"));
        Parent root = (Parent) loader.load();
        FXMLDocumentController controller = (FXMLDocumentController) loader.getController();
        GraphicsContext gc = controller.canvas.getGraphicsContext2D();
        zeichneDreieck(gc);
        root.getChildren().add(controller.canvas);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

    public void zeichneDreieck(GraphicsContext gc) {
        Point2D p1 = new Point2D(0.0, 0.0);
        Point2D p2 = new Point2D(200.0, 200.0);
        Point2D p3 = new Point2D(200.0, 0.0);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(5);
        gc.strokeLine(p1.getX(),p1.getY(),p2.getX(),p2.getY());
        gc.strokeLine(p2.getX(),p2.getY(),p3.getX(),p3.getY());
        gc.strokeLine(p3.getX(),p3.getY(),p1.getX(),p1.getY());
    }
}

FXMLDocumentController.java:

package grafikprogramm_dreieck;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.TextField;

public class FXMLDocumentController implements Initializable {
   
  @FXML public TextField horizStrecke_textField;
  @FXML public TextField vertStrecke_textField;
  @FXML public TextField winkel_textField;
  @FXML public Canvas canvas;
   
  @FXML
  public void handleButtonTranslate(ActionEvent event) {
    System.out.println("Verschieben um "+horizStrecke_textField.getText()+" nach rechts/links "+
      "und verschieben um "+vertStrecke_textField.getText()+" nach oben/unten");
    //verschiebeDreieck();
  }

  @FXML
  public void handleButtonRotate(ActionEvent event) {
    System.out.println("Rotieren um "+winkel_textField.getText());
    //rotiereDreieck();
  }
     
  @Override
    public void initialize(URL url, ResourceBundle rb) {
    // ...
  }
     
  public void verschiebeDreieck() {
    // ...
  }

  public void rotiereDreieck() {
    // ...
  }
}

FXMLDocument.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="700.0" prefWidth="700.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="grafikprogramm_dreieck.FXMLDocumentController">
  <children>
  <VBox prefHeight="700.0" prefWidth="700.0">
  <children>
  <HBox alignment="CENTER_LEFT" prefHeight="39.0" prefWidth="700.0">
  <children>
  <Label alignment="BASELINE_RIGHT" contentDisplay="CENTER" text="Horizontale Strecke">
  <font>
  <Font size="15.0" />
  </font>
  <HBox.margin>
  <Insets left="10.0" />
  </HBox.margin>
  </Label>
  <TextField fx:id="horizStrecke_textField" prefHeight="28.0" prefWidth="69.0" promptText="0 Pixel">
  <font>
  <Font size="15.0" />
  </font>
  <HBox.margin>
  <Insets left="10.0" />
  </HBox.margin>
  </TextField>
  <Label alignment="BASELINE_RIGHT" contentDisplay="CENTER" text="Vertikale Strecke">
  <font>
  <Font size="15.0" />
  </font>
  <HBox.margin>
  <Insets left="30.0" />
  </HBox.margin>
  </Label>
  <TextField fx:id="vertStrecke_textField" prefHeight="28.0" prefWidth="69.0" promptText="0 Pixel">
  <font>
  <Font size="15.0" />
  </font>
  <HBox.margin>
  <Insets left="10.0" />
  </HBox.margin>
  </TextField>
  <Button fx:id="verschieben_button" mnemonicParsing="false" onAction="#handleButtonTranslate" text="Verschieben">
  <HBox.margin>
  <Insets left="30.0" />
  </HBox.margin>
  <font>
  <Font size="15.0" />
  </font>
  </Button>
  </children>
  </HBox>
  <HBox alignment="CENTER_LEFT" prefHeight="39.0" prefWidth="700.0">
  <children>
  <Label text="Winkel">
  <font>
  <Font size="15.0" />
  </font>
  <HBox.margin>
  <Insets left="10.0" />
  </HBox.margin>
  </Label>
  <TextField fx:id="winkel_textField" prefHeight="29.0" prefWidth="99.0" promptText="+/- 0.0°">
  <HBox.margin>
  <Insets left="10.0" />
  </HBox.margin>
  <font>
  <Font size="15.0" />
  </font>
  </TextField>
  <Button fx:id="rotieren_button" mnemonicParsing="false" onAction="#handleButtonRotate" text="Rotieren">
  <HBox.margin>
  <Insets left="30.0" />
  </HBox.margin>
  <font>
  <Font size="15.0" />
  </font>
  </Button>
  </children>
  </HBox>
  <Canvas fx:id="canvas" height="624.0" width="700.0" />
  </children>
  </VBox>
  </children>
</AnchorPane>

Ausführbar ist der Code so leider nicht, da es noch ein Problem mit der Zeile

root.getChildren().add(controller.canvas);

gibt. Da ist die Fehlermeldung: "getChildren() has protected access in Parent".

Kann mir jemand einen Hinweis (oder vielleicht auch Code) geben, was ich in NewFXMain.start machen muss, um das Dreieck auf dem Canvas des GUIs zu zeichnen? Vielen Dank schon mal!

 

[dzim]

Also ich weiss es jetzt, ohne es zu probieren nicht genau, aber mir scheint etwas komisch, dass du das Canvas noch einmal explizit hinzufügen willst. Es ist doch bereits "child" einer HBox (laut dem FXML) und du kannst IMHO nicht einfach ein Controll an zwei Parents hängen...

 

[732E772E]

dzim, danke für deine Antwort! Du hast sicher recht, dass es Quatsch ist, das Canvas nochmal hinzuzufügen mit

root.getChildren().add(controller.canvas);

Leider habe ich kein JavFX-Beispiel im Internet gefunden, das etwas ähnliches wie meine App macht, so dass ich mich daran hätte orientieren können. Deshalb ist die NewFXMain.start nur so aus verschiedenen Programmen zusammengestöpselt, ohne dass ich eigentlich richtig verstehe, was da geschieht. Man kann sich sicherlich noch darüber streiten, ob es besser ist, drei separate Linien zu zeichen, die zusammen ein Dreieck ergeben, oder ob man gleich ein Polygon zeichnet. Aber grundsätzlich wird es doch nicht so schwierig sein, den GraphicsContext gc dem Canvas hinzuzufügen, nicht wahr? Weitere Hilfe ist immer noch gerne gesehen... Vielen Dank!

 

[dzim]

Ok. Ca. 10min hab ich mir genommen. Das hat deswegen solange gedauert, weil ich deine UI "nachgebaut" habe. Ich verwende Eclipse/e(fx)clipse mit deren FXGraph-Format (JSON ähnliche DSL, die vom e(fx)clipse-Plugin zu FXML geparst wird).

Main-Klasse

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
   
    @Override
    public void start(Stage stage) throws Exception {
       
        FXMLLoader loader = new FXMLLoader(getClass().getResource("CanvasTest.fxml"));
       
        Parent root = loader.load();
        CanvasTestController controller = loader.getController();
        controller.printShape();
       
        Scene scene = new Scene(root);
       
        stage.setScene(scene);
        stage.show();
    }
   
    /**
     * @param args
     *            the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

FXGraph

package application

import javafx.scene.layout.BorderPane
import javafx.scene.canvas.Canvas
import application.CanvasTestController
import javafx.scene.layout.VBox
import javafx.scene.control.Button
import javafx.scene.layout.HBox
import javafx.scene.control.Label
import javafx.geometry.Insets
import javafx.scene.control.TextField
import javafx.scene.layout.GridPane

component CanvasTest controlledby CanvasTestController {
    BorderPane {
        top : VBox {
            GridPane {
                hgap : 5, vgap : 5,
                // zeile 1
                Label {
                    text : "Horizontale Strecke:",
                    static columnIndex : 0,
                    static rowIndex : 0
                },
                TextField id text1 {
                    promptText : "Horizontale Strecke eingeben",
                    static columnIndex : 1,
                    static rowIndex : 0
                },
                // zeile 2
                Label {
                    text : "Vertikale Strecke:",
                    static columnIndex : 0,
                    static rowIndex : 1
                },
                TextField id text2 {
                    promptText : "Vertikale Strecke eingeben",
                    static columnIndex : 1,
                    static rowIndex : 1
                },
                Button id button1 {
                    text : "Und Los...",
                    static columnIndex : 2,
                    static rowIndex : 1,
                    onAction : controllermethod handleButton1
                },
                // zeile 3
                Label {
                    text : "Winkel:",
                    static columnIndex : 0,
                    static rowIndex : 2
                },
                TextField id text3 {
                    promptText : "Winkel eingeben",
                    static columnIndex : 1,
                    static rowIndex : 2
                },
                Button id button2 {
                    text : "Rotieren",
                    static columnIndex : 2,
                    static rowIndex : 2,
                    onAction : controllermethod handleButton2
                }
            },
            static margin : Insets {
                left : 5,
                top : 5,
                right : 5,
                bottom : 5
            }
        },
        center : Canvas id canvas {
            static alignment : "CENTER",
            width : 600,
            height : 480
        }
    }
}

Daraus wurde das FXML

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Do not edit this file it is generated by e(fx)clipse from ../src/application/CanvasTest.fxgraph
-->

<?import java.lang.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.VBox?>

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="application.CanvasTestController">

    <top>
        <VBox>
            <GridPane hgap="5" vgap="5">
                <Label text="Horizontale Strecke:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
                <TextField fx:id="text1" promptText="Horizontale Strecke eingeben" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
                <Label text="Vertikale Strecke:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
                <TextField fx:id="text2" promptText="Vertikale Strecke eingeben" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
                <Button fx:id="button1" text="Und Los..." onAction="#handleButton1" GridPane.columnIndex="2" GridPane.rowIndex="1"/>
                <Label text="Winkel:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
                <TextField fx:id="text3" promptText="Winkel eingeben" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
                <Button fx:id="button2" text="Rotieren" onAction="#handleButton2" GridPane.columnIndex="2" GridPane.rowIndex="2"/>
            </GridPane>
            <BorderPane.margin>
                <Insets left="5" top="5" right="5" bottom="5"/>
            </BorderPane.margin>
        </VBox>
    </top>
    <center>
        <Canvas fx:id="canvas" width="600" height="480" BorderPane.alignment="CENTER"/>
    </center>
</BorderPane>

Der Controller

package application;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.geometry.Point2D;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;

public class CanvasTestController {
   
    @FXML
    private TextField text1;
    @FXML
    private TextField text2;
    @FXML
    private TextField text3;
    @FXML
    private Button button1;
    @FXML
    private Button button2;
    @FXML
    private Canvas canvas;
   
    private GraphicsContext gc;
   
    @FXML
    public void initialize() {
        gc = canvas.getGraphicsContext2D();
    }
   
    @FXML
    public void handleButton1(ActionEvent event) {}
   
    @FXML
    public void handleButton2(ActionEvent event) {}
   
    public void printShape() {
        Point2D p1 = new Point2D(0.0, 0.0);
        Point2D p2 = new Point2D(200.0, 200.0);
        Point2D p3 = new Point2D(200.0, 0.0);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(5);
        gc.strokeLine(p1.getX(), p1.getY(), p2.getX(), p2.getY());
        gc.strokeLine(p2.getX(), p2.getY(), p3.getX(), p3.getY());
        gc.strokeLine(p3.getX(), p3.getY(), p1.getX(), p1.getY());
    }
}

Klappt...

 

[732E772E]

Ich hab's bei mir in NetBeans nachgebaut und es läuft! Vielen Dank für deine Mühe und Hilfe!

 

[dzim]

Kein Ding. Das wichtige aber ist, das du nicht nur Copy und Pasta machst, sondern es auch versuchst zu verstehen. Ok?

 

[732E772E]

dzim, ich gebe dir vollkommen recht. Ich habe mich offenbar missverständlich ausgedrückt, als ich schrieb, ich hätte es mit NetBeans nachgebaut. Und zwar meinte ich, dass ich die für mein Beispiel relevanten Elemente aus deinem Code entnommen habe und sie in meinen Code eingebaut habe bzw. meinen Code entsprechend modfiziert habe. In sofern war es nicht einfach nur "copy and paste". Die Funktionsweise ist mir jetzt auf jeden Fall klar. Vielen Dank nochmal für deine Hilfe!