欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaFX 画图-直角坐标系

程序员文章站 2022-04-04 12:57:39
...

JavaFX 画图-直角坐标系


1.实际效果

    JavaFX 画图-直角坐标系

2.分析

        JavaFX 画图-直角坐标系

    1.    如图所绘制的直角坐标系是由三个主要部分组成的

            ①实心三角形,即坐标轴正方向

            ②坐标轴,即一条水平直线和竖直直线

            ③坐标原点(不用画出)

    2.    坐标系由三部分组成,而实际需要提供的参数只有两个:坐标原点的位置、坐标轴的长度。作图时根据给定的原点坐标[(centerX,centerY)]和坐标轴的长度(axisLength),可以计算出水平轴的起点坐标[(xStartX,yStartY)]和终点坐标[( xEndX,xEndY )]、竖直轴的起点坐标[( yStartX,yStartY )]和终点坐标[( yEndX,yEndY )]。

            xStartX=centerX+axisLength/2

            xStartY=centerY

            xEndX=centerX-axisLength/2

            xEndY=centerY

            yStartX=centerX

            yStartY=centerY+axisLength/2

            yEndX=centerX

            yEndY= centerY-axisLength/2

    3.    给定两个确定参数的实心三角形,作为坐标轴的方向。

    4.    由给定的以上参数去自定义坐标轴的直线和坐标系的类。


3.准备工作及步骤

    1.    自定义DrawHLine类,用以绘制x轴。并初始化线段的参数,颜色。

    2.    自定义DrawVLine类,用以绘制y轴。并初始化线段的参数,颜色,使x,y的颜色一致。

    3.    自定义DrawAxis类,在类中定义四个私有属性,创建Getter方法。

         /**
* 坐标轴的方向
*/
private Polygon xAxisTip; 
private Polygon yAxisTip;
/**
* 坐标轴
*/
private DrawHLine xAxis;
private DrawVLine yAxis;

    4.    在DrawAxis类中创建初始化方法,给代表坐标轴方向的两个三角形的参数初始化。

                JavaFX 画图-直角坐标系


    5.    写一个调用的类包含main方法,用以测试类的正确性。


5.总结

    在绘制坐标系的过程中,最难的就是如何由原点坐标和坐标轴长度去确定x,y轴两条直线的绘制和表示x,y轴方向的两个三角形的绘制。需要确定三角形的位置和形状。在绘制的过程中,有自定义类和对组件类的调用。将以完成的各个组件同时添加在一个Parent元素上,并在Stage中显示。

    还可以将一些坐标系的特征解耦出来,便于根据需要自定义。这个读者可以自己完成。


6.源码展示

        1.    DrawHLine类      

/**
 * @author Kejin
 * function: Maybe this class is just used to draw a x-axis	 
 * 
 */

package graphics;

import javafx.scene.paint.Color;
import javafx.scene.shape.Line;

public class DrawHLine extends Line {

	double startX;
	double startY;
	double endX;
	double endY;
	
	public DrawHLine() {
		// TODO Auto-generated constructor stub
	}

	public DrawHLine(double centerX,double centerY ,double lineLength) {
		super(centerX-lineLength/2, centerY, centerX+lineLength/2, centerY);
		// TODO Auto-generated constructor stub
		
		getLinePara(centerX, centerY, lineLength);
		
		//可补充
		selfDefine();	
	}
	
	public void getLinePara(double x,double y,double lineLength) {
		startX = x-lineLength/2;
		endX = x+lineLength/2;
		startY = y;
		endY = y;
	}

	public void selfDefine() { 
		setStroke(Color.GREEN);
		//设置画线使用虚线,实线长度,虚线长度
	//getStrokeDashArray().setAll(); 
	}
}

        2.DrawVLine类          

/**
 * @author Kejin
 * function: Maybe this class is just used to draw a y-axis	 
 * 
 */

package graphics;

import javafx.scene.paint.Color;
import javafx.scene.shape.Line;

public class DrawVLine extends Line {

	double startX;
	double startY;
	double endX;
	double endY; 
	
	public DrawVLine() {
		// TODO Auto-generated constructor stub
	}

	public DrawVLine(double centerX,double centerY ,double lineLength) {
		super(centerX, centerY-lineLength/2, centerX, centerY+lineLength/2);
		// TODO Auto-generated constructor stub
		getLinePara(centerX, centerY, lineLength);
		
		//可补充
		selfDefine();  
	}
	
	public void getLinePara(double x,double y,double lineLength) {
		startX = x ;
		endX = x ;
		startY = y-lineLength/2;
		endY = y+lineLength/2;
	}

	public void selfDefine() { 
		setStroke(Color.GREEN);
		//设置画线使用虚线,实线长度,虚线长度
		//getStrokeDashArray().setAll(); 
	} 
}

        3.DrawAxis类

/**
 * @author Kejin 
 * function: draw a coordinate system 
 * 
 * PS:	how to call it?
 * 		DrawAxis axis=new DrawAxis(150, 100, 100);
 *		root.getChildren().addAll(
 *	        			axis.getxAxis(),
 *		        		axis.getyAxis(),
 *		        		axis.getxAxisTip(),
 *		        		axis.getyAxisTip());
 * 
 */ 

package graphics;

import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Shape; 

public class DrawAxis{
	private static int PRE_CENTER_X=80;
	private static int PRE_CENTER_Y=80;
	private static int PRE_AXIS_LENGTH=40;
	 
	private int centerX;
	private int centerY;
	private int axisLength; 
	
	//init axis Tip
	double  xPoint[] = new double [6];
	//注意坐标是将第四象限作为第一象限
	double  yPoint[] = new double [6];  
	
	/**
	 * 坐标轴的箭头
	 */
	private Polygon xAxisTip; 
	private Polygon yAxisTip;
	/**
	 * 坐标轴
	 */
	private DrawHLine xAxis;
	private DrawVLine yAxis; 
	
	/**
     * Creates an empty instance of DrawAxis
     */
    public DrawAxis() {
		// TODO Auto-generated constructor stub
    	//the parameters is undefined,so set default values;
    	centerX = 40;
    	centerY = 40;
    	axisLength = 20;  
		xAxis = new DrawHLine(centerX, centerY, axisLength);
		yAxis = new DrawVLine(centerX, centerY, axisLength);
		initPara(centerX, centerY, axisLength);
	} 

    /**
     * Creates a new instance of Polygon.
     * @param (centerX , centerY) is the coordinate of Axis;
     * @param axisLenth is the length of axis; 
     */ 
	public DrawAxis(int centerX , int centerY , int axisLength){
		 
		xAxis = new DrawHLine(centerX, centerY, axisLength);
		yAxis = new DrawVLine(centerX, centerY, axisLength);
		initPara(centerX, centerY, axisLength);
	} 
 
	public void selfDefine() { 
		 
		//设置画线使用虚线,实线长度,虚线长度
		//getStrokeDashArray().setAll(); 
	}
	
	public void initPara(int x,int y,int length) {
		this.centerX=x;
		this.centerY=y;
		this.axisLength=length;
		
		System.out.println(centerX);
		System.out.println(centerY);
		System.out.println(axisLength); 
		
		//init axis Tip 
		xPoint[0] = centerX+axisLength/2+10;
		xPoint[1] = centerY;
		xPoint[2] = centerX+axisLength/2-1;
		xPoint[3] = centerY+4;
		xPoint[4] = centerX+axisLength/2-1;
		xPoint[5] = centerY-4;
		 
		//注意坐标是将第四象限作为第一象限
		yPoint[0] = centerX;
		yPoint[1] = centerY-10-axisLength/2;
		yPoint[2] = centerX-4;
		yPoint[3] = centerY-axisLength/2-1;
		yPoint[4] = centerX+4;
		yPoint[5] = centerY-axisLength/2-1; 
		//
		xAxisTip = new Polygon(xPoint);
		yAxisTip = new Polygon(yPoint);
		xAxisTip.setFill(Color.GREEN);
		yAxisTip.setFill(Color.GREEN);
		
	} 
	
	/**
	 * 
	 * @return xAxisTip
	 */
	public Polygon getxAxisTip() {
		return xAxisTip;
	}
	
	/**
	 * 
	 * @return yAxisTip 
	 */
	public Polygon getyAxisTip() {
		return yAxisTip;
	}
	
	/**
	 * 
	 * @return yAxisTip 
	 */
	public DrawHLine getxAxis() {
		return xAxis;
	}

	/**
	 * 
	 * @return yAxisTip 
	 */
	public DrawVLine getyAxis() {
		return yAxis;
	}
 
}

        4.AxisTest类,用以调用完成的类,

package test;
 
import graphics.DrawAxis;
import graphics.DrawCircle; 
import javafx.application.Application;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Region; 
import javafx.stage.Stage;
  
		/**
		 * A sample that demonstrates polygon construction.
		 */
        public class AxisTest extends Application {			
			
		    // Will be a simple red-filled triangle
			private int centerX=300;
			private int centerY=300;
			private int axisLength=100;
		    public Parent createContent() { 
 
		        Pane root = new Pane();
		        root.setPrefSize(300, 200);
		        root.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
		        root.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE); 
		        
		        DrawAxis axis=new DrawAxis(150, 100, 100);
		        DrawCircle circle = new DrawCircle(150, 100, 40);
		        root.getChildren().addAll(
		        		axis.getxAxis(),
		        		axis.getyAxis(),
		        		axis.getxAxisTip(),
		        		axis.getyAxisTip(),
		        		circle);
		 
		        return root;
		    }
		 
		    @Override
		    public void start(Stage primaryStage) throws Exception {
		    	primaryStage.setTitle(" Coordinate System");
		        primaryStage.setScene(new Scene(createContent()));
		        primaryStage.show();
		    }
		 
		    /**
		     * Java main for when running without JavaFX launcher
		     */
		    public static void main(String[] args) {
		        launch(args);
		    } 
        }