JavaFX之Canvas

JavaFX 2.2中新增加了一个很重要而且也很常见的东西 -- Canvas。

JavaFX中的Canvas，是继承Node的，按照继承的层级关系来看，它跟ImageView，MediaView，Parent和Shape是同

一层级的。

因此Canvas不能直接放入Scene中，必须添加到Parent中，然后加入Scene。

Canvas中包含了一个GraphicsContext，用来负责Canvas中的图形绘制的。其实也就是类似与Java2D的Graphics，

Graphics2D。

而GraphicsContext不仅仅可以进行各种图形的绘制，也可以应用JavaFX的一些特效，同时也有save和restore功能，

可以保存和还原一些全局参数。

下面我们来看看Canvas的简单的功能吧。

新建一个类MyCanvas继承Canvas。

import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcType;

public class MyCanvas extends Canvas {
    private GraphicsContext gc;
	public MyCanvas(double width, double height){
		super(width, height);
		
		gc = getGraphicsContext2D();
		draw(gc);
	}
	
	public void draw(GraphicsContext gc){
	
		gc.save();
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(2);                //设置线的宽度
        gc.strokeLine(0, 0, 50, 50);       //绘制直线
        gc.restore();
        
        //绘制椭圆
        gc.save();
        gc.setFill(Color.YELLOWGREEN);
        gc.strokeOval(0, 80, 50, 50);
        gc.fillOval(100, 80, 50, 50);
        gc.restore();
        
        //绘制矩形
        gc.save();
        gc.setStroke(Color.CHOCOLATE);
        gc.fillRect(0, 150, 50, 50);
        gc.strokeRect(100, 150, 50, 50);
        gc.restore();
        
        //绘制圆角矩形
        gc.save();
        gc.setFill(Color.CHOCOLATE);
        gc.fillRoundRect(0, 220, 50, 50, 15, 15);
        gc.strokeRoundRect(100, 220, 50, 50, 15, 15);
        gc.restore();
        
        //绘制扇形
        gc.save();
        gc.setStroke(Color.CHOCOLATE);
        gc.fillArc(10, 300, 30, 30, 40, 280, ArcType.OPEN);
        gc.fillArc(60, 300, 30, 30, 40, 280, ArcType.CHORD);
        gc.fillArc(110, 300, 30, 30, 40, 280, ArcType.ROUND);
        gc.strokeArc(10, 340, 30, 30, 40, 280, ArcType.OPEN);
        gc.strokeArc(60, 340, 30, 30, 40, 280, ArcType.CHORD);
        gc.strokeArc(110, 340, 30, 30, 40, 280, ArcType.ROUND);
        gc.restore();
        
        //绘制多边形
        gc.save();
        gc.setFill(Color.RED);
        gc.setStroke(Color.CHOCOLATE);
        gc.fillPolygon(new double[]{0, 40, 50, 60, 100, 70, 85, 50, 15, 30}, new double[]{440,440,400,440,440,  460,500,470,500,460}, 10);
        gc.strokePolygon(new double[]{0, 40, 50, 60, 100, 70, 85, 50, 15, 30}, new double[]{440,440,400,440,440,  460,500,470,500,460}, 10);
        gc.restore();
	}
}

基本图形的绘制其实跟Java和Android中都很类似，就不过多描述。save和restore也在这里进行了一下简单的应

用。

然后建立JavaFX的主类，将Canvas添加进根节点。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MainClass extends Application {
    private static final int WIDTH = 800;
	private static final int HEIGHT = 600;
	@Override
	public void start(Stage primaryStage) {
		MyCanvas mCanvas = new MyCanvas(WIDTH, HEIGHT);
		Group root = new Group();
		root.getChildren().add(mCanvas);
		Scene scene = new Scene(root, WIDTH, HEIGHT);
		
		primaryStage.setTitle("JavaFX Canvas");
		primaryStage.setScene(scene);
		primaryStage.show();
	}

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

我们来看看运行的效果：

这些只是基本的图形绘制，当然你也可以使用applyeffect来很容易的应用一些特效。

这都是需要我们自己进行灵活的运行来做出炫丽的效果。

那么Canvas的介绍就暂时到这里了。

转载请注明出处:http://blog.csdn.net/ml3947