JavaFX 画图-直角坐标系

JavaFX 画图-直角坐标系

1.实际效果

    

2.分析

        

    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类中创建初始化方法，给代表坐标轴方向的两个三角形的参数初始化。

                

    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);
		    } 
        }