JavaFX Gedrehter Text auf Canvas (Positionierung)

[hk]

Hallo Forum,
ich möchte auf einer Canvas einen Text ausgeben, der um einen Winkel gedreht ist. Das funktioniert auch, nur die Position des Textes ist weder ohne oder mit Zentrierung dort wo sie sein soll. Kann mir jemand sagen wie ich den Text auf die gewünschte Position bringen kann?
Folgender Code ist lauffähig.

package text45grad;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

/**
 * Ein Text wird auf einer Canvas über einem Winkel gedreht und
 * auf einem Mittelpunkt zentriert
 * @author User
 */
public class Text45Grad extends Application {
 
  Canvas canvas;
  double angle = -45d;
  double x = 300;
  double y = 200;
  double textWidth;
  @Override
  public void start(Stage primaryStage) {
    canvas = new Canvas(600, 600);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    // Testlinie zeichnen
    gc.beginPath();
    gc.moveTo(300, 0);
    gc.lineTo(300, 599);
    gc.moveTo(290, 200);
    gc.lineTo(310, 200);
    gc.stroke();
    // Canvas wird gesichert und dann mittels 'angle' gedreht
    gc.save();
    Rotate r = new Rotate(angle, canvas.getWidth() / 2, canvas.getHeight() / 2);
    gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
    // Textlänge in Pixel holen
    String tx = "Das ist ein gedrehter Text!";
    Text text = new Text(tx);
//    text.setFont(dc.fx_help.getFont()); // gewünschter Font
    textWidth = text.getLayoutBounds().getWidth();
    double diff = x- y;
    // Text nun normal ausgeben
//    gc.fillText(tx, x, y);
    gc.fillText(tx, x - textWidth / 2 , y );
    // Canvas wird zurückgedreht
    gc.restore();
    
    StackPane root = new StackPane();
    root.getChildren().add(canvas);
    
    Scene scene = new Scene(root, 600, 600);
    
    primaryStage.setTitle("Text gedreht ausgeben");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    launch(args);
  }
 
}

 

[yfons123]

die Position des Textes ist weder ohne oder mit Zentrierung dort wo sie sein soll. Kann mir jemand sagen wie ich den Text auf die gewünschte Position bringen kann?

da du nicht erwähnst was die gewünschte position ist eher nicht

 

[hk]

da du nicht erwähnst was die gewünschte position ist eher nicht

Wenn du dir den Code ansiehst, wirst du sie sehen (x=300, y=200)

 

[yfons123]

du verschiebst deinen text um die hälfte der width nach rechts
dann um die hälfte der width nach unten da der dreh punkt des textes halt nunmal links ist und nicht in der mitte

also musst du den linken punkt so verschieben dass es rotiert wäre als wie wenn es um den mittelpunkt rotiert wäre

 

[hk]

du verschiebst deinen text um die hälfte der width nach rechts
dann um die hälfte der width nach unten da der dreh punkt des textes halt nunmal links ist und nicht in der mitte

also musst du den linken punkt so verschieben dass es rotiert wäre als wie wenn es um den mittelpunkt rotiert wäre

das klingt logisch, funktioniert aber nicht (siehe neuer Code). Wenn wie du sagst die Drehachse links (also bei x=300, y=200) ist dann dürfte sich diese Position nicht verändern sondern nur der Rest des Textes. Dem ist aber nicht so. Das sieht man, wenn man den Text ohne Zentrierung ausgibt, auch dann ist er verschoben (Tausche <- mit Zentrierung gegen <- ohne Zentrierung).

package text45grad;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

/**
 * Ein Text wird auf einer Canvas über einem Winkel gedreht und
 * auf einem Mittelpunkt zentriert
 * @author User
 */
public class Text45Grad extends Application {
 
  Canvas canvas;
  double angle = -45d;
  double x = 300;
  double y = 200;
  double textWidth;
  @Override
  public void start(Stage primaryStage) {
    canvas = new Canvas(600, 600);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    // Testlinie zeichnen
    gc.beginPath();
    gc.moveTo(300, 0);
    gc.lineTo(300, 599);
    gc.moveTo(290, 200);
    gc.lineTo(310, 200);
    gc.stroke();
    
    // Canvas wird gesichert und dann mittels 'angle' gedreht
    gc.save();
    Rotate r = new Rotate(angle, canvas.getWidth() / 2, canvas.getHeight() / 2);
    gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
    // Textlänge in Pixel holen
    String tx = "Das ist ein gedrehter Text!";
    Text text = new Text(tx);
//    text.setFont(dc.fx_help.getFont()); // gewünschter Font
    textWidth = text.getLayoutBounds().getWidth();
    // Text nun normal ausgeben
//    gc.fillText(tx, x, y);                                // <- ohne Zentrierung
    gc.fillText(tx, x + textWidth / 2 , y + textWidth / 2); // <- mit Zentrierung
    // Canvas wird zurückgedreht
    gc.restore();
    
    StackPane root = new StackPane();
    root.getChildren().add(canvas);
    
    Scene scene = new Scene(root, 600, 600);
    
    primaryStage.setTitle("Text gedreht ausgeben");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    launch(args);
  }
 
}

 

[Neumi5694]

Der Einfügepunkt eines Texts liegt links oberhalb des Texts, du wirst dessen Shape also erst mal um die Differenz zum gewünschten Drehpunkt verschieben müssen.
Nach der Drehung kannst du immer noch zurückschieben.

 

[hk]

Ich habe es nun geschafft. Der Text wird in jedem Winkel korrekt angezeigt (die Zentrierung habe ich noch nicht berücksichtigt).
Hier der lauffähige Code:

package text45grad;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * Ein Text wird auf einer Canvas über einem Winkel gedreht und
 * auf einem Mittelpunkt zentriert
 * @author User
 */
public class Text45Grad extends Application {
 
  Canvas canvas;
  double angle = 225d;
  double x = 300;
  double y = 200;
  double textWidth;
  String tx = "Das ist ein gedrehter Text!";

  @Override
  public void start(Stage primaryStage) {
    canvas = new Canvas(600, 600);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    // Testlinie zeichnen
    gc.beginPath();
    gc.moveTo(300, 0);
    gc.lineTo(300, 599);
    gc.moveTo(290, 200);
    gc.lineTo(310, 200);
    gc.stroke();
    
    drawAngledText(x, y, tx, angle, gc);
    
    StackPane root = new StackPane();
    root.getChildren().add(canvas);
    Scene scene = new Scene(root, 600, 600);
    primaryStage.setTitle("Text gedreht ausgeben");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  /***************************************************
   * Ein Text wird in einem definierten Winkel auf dem
   * GraphicsContext angezeigt.
   * @param x     = X-Position der Anzeige
   * @param y     = Y-Position der Anzeige
   * @param text  = Anzuzeigender Text
   * @param angle = Textwinkel
   * @param gc    = GraphicsContext
   */
  public static void drawAngledText(double x, double y, String text,
          double angle, GraphicsContext gc) {
    // Wenn der Winkel größer 90° und kleiner 270° ist wird
    // die Text-Startpositin umgedreht. Sie liegt nun dort
    // wo das Textend gewesen wäre.
    if(angle > 90 && angle < 270) {
      Text tx = new Text(text);
      double textWidth = tx.getLayoutBounds().getWidth();
      // Anhand der Textlänge wird die Positionsänderung
      // in x/y Richtung errechnet.
      x += textWidth * Math.cos(Math.PI/180*angle);
      y += textWidth * Math.sin(Math.PI/180*angle);
      // Der ursprüngliche Winkel wird um 180° gedreht.
      angle += 180;
    }
    // Rotation und Anzeige durchführen
    gc.save();
    gc.translate(x, y);
    gc.rotate(angle);
    gc.fillText(text, 0, 0);
    gc.restore();
  } //end drawAngledText *********************************
 
  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    launch(args);
  }
}

PS: Wenn es jemand besser kann, sehe ich mir das gerne an,
lg heinz