JavaFX之2D编程（Canvas）

简介

源码下载

2d编程实际开发中很常见，比如生成一个验证码，二维码，图片裁剪压缩什么的。在桌面应用中，自定控件的外观的渲染，都是通过2D图像接口来实现的。当然，我们也可以利用这些编程接口，做一个画图工具。JavaFX中专门提供一个Canvas的组件，用来画画。比如下图中，用代码画出来的一些几何图形：

Canvas提供了一个操作手柄，叫做GraphicsContext，可以通过Canvas的实例获得：

GraphicsContext gc = canvas.getGraphicsContext2D();

Canvas是一种自上而下的流式画图方式，每次画图之前，采用上文的设置，比如颜色，线条粗细等。同样画下一个图形前，先更改设置，再绘制下一个图形，如果不更改设置，则延用之前的设置。比如：

gc.setFill(Color.GREEN);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(5);
        gc.strokeLine(40, 10, 10, 40);
        
        gc.fillOval(10, 60, 30, 30);
        gc.strokeOval(60, 60, 30, 30);

Canvas中的图像设置

Canvas的画图接口

也就是GraphicsContext可调用的类方法：

示例1-基本图形

   private void drawShapes(GraphicsContext gc) {
        gc.setFill(Color.GREEN);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(5);
        gc.strokeLine(40, 10, 10, 40);
        gc.fillOval(10, 60, 30, 30);
        gc.strokeOval(60, 60, 30, 30);
        gc.fillRoundRect(110, 60, 30, 30, 10, 10);
        gc.strokeRoundRect(160, 60, 30, 30, 10, 10);
        gc.fillArc(10, 110, 30, 30, 45, 240, ArcType.OPEN);
        gc.fillArc(60, 110, 30, 30, 45, 240, ArcType.CHORD);
        gc.fillArc(110, 110, 30, 30, 45, 240, ArcType.ROUND);
        gc.strokeArc(10, 160, 30, 30, 45, 240, ArcType.OPEN);
        gc.strokeArc(60, 160, 30, 30, 45, 240, ArcType.CHORD);
        gc.strokeArc(110, 160, 30, 30, 45, 240, ArcType.ROUND);
        gc.fillPolygon(new double[]{10, 40, 10, 40},
                       new double[]{210, 210, 240, 240}, 4);
        gc.strokePolygon(new double[]{60, 90, 60, 90},
                         new double[]{210, 210, 240, 240}, 4);
        gc.strokePolyline(new double[]{110, 140, 110, 140},
                          new double[]{210, 210, 240, 240}, 4);
    }
}

示例2-渐变和阴影

  /**
     * 在画布对象上绘制一个径向渐变效果，该效果表现为一系列向外辐射的圆圈。
     * 此示例默认使用红色和黄色。 
     * 
     * @param firstColor 渐变的第一段所使用的颜色。
     * @param lastColor  渐变的最后一段所使用的颜色。
     */
    private void drawRadialGradient(Color firstColor, Color lastColor) {
        gc.setFill(new RadialGradient(0, 0, 0.5, 0.5, 0.1, true,
                CycleMethod.REFLECT,
                new Stop(0.0, firstColor),
                new Stop(1.0, lastColor)));
        gc.fill();
    }

    /**
     * 渐变的最后一段所使用的颜色。在画布对象上绘制一条线性渐变，从上到下为字母“D”着色。
     * 此演示中使用的默认颜色为蓝色和绿色。
     * 
     * @param firstColor
     * @param secondColor 
     */
    private void drawLinearGradient(Color firstColor, Color secondColor) {
        LinearGradient lg = new LinearGradient(0, 0, 1, 1, true,
                CycleMethod.REFLECT,
                new Stop(0.0, firstColor),
                new Stop(1.0, secondColor));
        gc.setStroke(lg);
        gc.setLineWidth(20);
        gc.stroke();
    }

    /**
     * 在字母“D”周围绘制四个独立的阴影效果。演示中所使用的默认颜色为灰色、蓝色、绿色和红色。
     * 
     * @param firstColor
     * @param secondColor
     * @param thirdColor
     * @param fourthColor 
     */
    private void drawDropShadow(Color firstColor, Color secondColor,
            Color thirdColor, Color fourthColor) {
        gc.applyEffect(new DropShadow(20, 20, 0, firstColor));
        gc.applyEffect(new DropShadow(20, 0, 20, secondColor));
        gc.applyEffect(new DropShadow(20, -20, 0, thirdColor));
        gc.applyEffect(new DropShadow(20, 0, -20, fourthColor));
    }

示例3-涂鸦

涂鸦前：

涂鸦后：

鼠标拖拽时，清除掉指针附近的颜色：

     canvas.addEventHandler(MouseEvent.MOUSE_DRAGGED, 
       new EventHandler<MouseEvent>() {
           @Override
           public void handle(MouseEvent e) {
               gc.clearRect(e.getX() - 2, e.getY() - 2, 5, 5);
           }
       });

示例4-图层

    private void createLayers(){
        
        // Layers 1&2 are the same size
        layer1 = new Canvas(300,250);
        layer2 = new Canvas(300,250);
        
        // Obtain Graphics Contexts
        gc1 = layer1.getGraphicsContext2D();
        gc1.setFill(Color.GREEN);
        gc1.fillOval(50,50,20,20);
        gc2 = layer2.getGraphicsContext2D();
        gc2.setFill(Color.BLUE);
        gc2.fillOval(100,100,20,20);
    }
    
    private void handleLayers(){
        // Handler for Layer 1
        layer1.addEventHandler(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent e) {          
                gc1.fillOval(e.getX(),e.getY(),20,20);
            }
        });
        
         // Handler for Layer 2
        layer2.addEventHandler(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent e) {
                gc2.fillOval(e.getX(),e.getY(),20,20);
            }
        });
    }