仿射变换适用于图形,不适用于文本和标签

2024-03-06

这篇文章是我对问题的回答的套件:变换形状 https://stackoverflow.com/questions/15734388/transforming-a-shape

这是我想要的图像:

这是一个简单程序生成的图像,您可以看到文本被旋转。我想要水平文本:

画布会缩放、平移、旋转来进行绘图,因此文本不会水平显示,并且字体大小需要极大减小(1.4)。该程序是用 Java(awt 和 JavaFX)编写的,但问题与语言或技术无关,因此欢迎任何建议。

这是简单的程序:

import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class TransRotScale extends Application {

   private static void drawGraph( GraphicsContext g ) {
      //---
      g.scale( 10.0, 10.0 );
      g.rotate( Math.toDegrees( Math.atan2( -15.0, 40.0 )));
      g.translate( -8, -10 );
      //---
      g.setStroke( Color.DARKRED );
      g.setLineWidth( LINE_WIDTH );
      g.strokeLine( 10, 20, 10, 30 );
      g.strokeLine( 10, 30, 50, 30 );
      g.strokeLine( 50, 30, 50, 35 );
      //---
      g.setFill( Color.BLACK );
      g.fillOval( 50-ENDPOINT_RADIUS, 35-ENDPOINT_RADIUS,
         ENDPOINT_DIAMETER, ENDPOINT_DIAMETER );
      g.fillOval( 10-ENDPOINT_RADIUS, 20-ENDPOINT_RADIUS,
         ENDPOINT_DIAMETER, ENDPOINT_DIAMETER );
      //---
      g.setFill( Color.LIGHTSALMON );
      g.fillOval( 10-ENDPOINT_RADIUS, 30-ENDPOINT_RADIUS,
         ENDPOINT_DIAMETER, ENDPOINT_DIAMETER );
      g.fillOval( 50-ENDPOINT_RADIUS, 30-ENDPOINT_RADIUS,
         ENDPOINT_DIAMETER, ENDPOINT_DIAMETER );
      //---
      g.setStroke( Color.DARKGRAY );
      g.setFont( Font.font( Font.getDefault().getFamily(), 1.4 ));
      g.setLineWidth( 0.1 );
      g.setTextAlign( TextAlignment.CENTER );
      g.setTextBaseline( VPos.BOTTOM );
      g.strokeText( "[10, 20]", 10, 20-ENDPOINT_RADIUS );
      g.setTextBaseline( VPos.TOP );
      g.strokeText( "[10, 30]", 10, 30+ENDPOINT_RADIUS );
      g.setTextBaseline( VPos.BOTTOM );
      g.strokeText( "[50, 30]", 50, 30-ENDPOINT_RADIUS );
      g.setTextBaseline( VPos.TOP );
      g.strokeText( "[50, 35]", 50, 35+ENDPOINT_RADIUS );
   }

   @Override
   public void start( Stage primaryStage ) throws Exception {
      BorderPane bp = new BorderPane();
      Canvas canvas = new Canvas( 540, 240 );
      bp.setCenter( canvas );
      drawGraph( canvas.getGraphicsContext2D());
      primaryStage.setScene( new Scene( bp ));
      primaryStage.centerOnScreen();
      primaryStage.show();
   }

   public static final double ENDPOINT_RADIUS   = 2.0;
   public static final double ENDPOINT_DIAMETER = 2.0*ENDPOINT_RADIUS;
   public static final double LINE_WIDTH        = 1.0;

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

在用于显示第一张图像(目标)的程序中,我使用两个画布,第一个画布被缩放、平移、旋转以进行没有任何文本的绘图,第二个画布仅用于水平绘制标签,使用java.awt.geom.AffineTransform计算坐标以匹配第一个画布中显示的项目。两个画布叠加显示,它们是透明的。


这就是建议亚历山大·基洛夫 https://stackoverflow.com/users/1951882/alexander-kirov,如果我理解得好的话:

import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Polyline;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class TransRotScal extends Application {

   @Override
   public void start( Stage primaryStage ) throws Exception {
      Pane pane = new Pane();
      pane.setScaleX( 10.0 );
      pane.setScaleY( 10.0 );
      pane.setRotate( theta );
      pane.setTranslateX( 468.0 );
      pane.setTranslateY( 152.0 );
      Polyline line = new Polyline( 10,20, 10,30, 50,30, 50,35 );
      line.setStroke( Color.DARKRED );
      Circle   c0   = new Circle( 10, 20, 2, Color.BLACK );
      Circle   c1   = new Circle( 10, 30, 2, Color.LIGHTSALMON );
      Circle   c2   = new Circle( 50, 30, 2, Color.LIGHTSALMON );
      Circle   c3   = new Circle( 50, 35, 2, Color.BLACK );
      Text     t0   = createText( 10, 20, "[10,20]", VPos.BOTTOM );
      Text     t1   = createText( 10, 30, "[10,30]", VPos.TOP );
      Text     t2   = createText( 50, 30, "[50,30]", VPos.BOTTOM );
      Text     t3   = createText( 50, 35, "[50,35]", VPos.TOP );
      pane.getChildren().addAll( line, c0, c1, c2, c3, t0, t1, t2, t3 );
      primaryStage.setScene( new Scene( pane ));
      primaryStage.centerOnScreen();
      primaryStage.setWidth ( 580 );
      primaryStage.setHeight( 280 );
      primaryStage.show();
   }

   private Text createText( int x, int y, String label, VPos vPos ) {
      Text text = new Text( x, y, label );
      text.setFill( Color.DARKGRAY );
      text.setFont( Font.font( Font.getDefault().getFamily(), 1.4 ));
      text.rotateProperty().set( -theta );
      text.textAlignmentProperty().setValue( TextAlignment.CENTER );
      text.setX( text.getX() - text.getBoundsInLocal().getWidth()/2.0);
      text.textOriginProperty().set( vPos );
      if( vPos == VPos.BOTTOM ) {
         text.setY( text.getY() - 2 );
      }
      else {
         text.setY( text.getY() + 2 );
      }
      return text;
   }

   private final double theta = Math.toDegrees( Math.atan2( -15.0, 40.0 ));

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

它可以工作,但它使用 Node 代替画布,并且调整文本的值是通过迭代尝试获得的(很多!);我不知道如何计算它们.

亚历山大,您可以编辑这篇文章或发布您自己的文章来完成它,在后一种情况下我将删除它。

这是结果,请注意光盘周围文本的近似位置:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仿射变换适用于图形,不适用于文本和标签 的相关文章

随机推荐