javaFX canvas api 用户与图形交互小例子

原文位置DOC-02-09 使用Canvas API | JavaFX中文资料

显示一个蓝色的方框，它会随着用户在其表面拖动鼠标来擦除其内容

 

 

定义了一个reset方法用于使用默认的蓝色来填充整个矩形。不过大多数有意思的代码都在start方法中了，它们重载了与用户进行交互的方法。在第一段被注释的代码部分增加了处理用户拖放鼠标时产生的MouseEvent的事件处理器。在每次鼠标被拖动时GraphicsContext对象的clearRect方法都将会被调用，并传入当前的鼠标坐标和要清除的区域大小。当矩形被擦除后，背景中的渐变就会被逐步显示出来 

 

 

其余部分的代码简单地统计了点击的次数，并且当用户双击鼠标时将蓝色矩形框重置为初始状态 

 如下是全部代码复制黏贴变成一个类就能运行

/*
 * Copyright (c) 2012, 2014 Oracle and/or its affiliates.
 * All rights reserved. Use is subject to license terms.
 *
 * This file is available and licensed under the following license:
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 *  - Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 *  - Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in
 *    the documentation and/or other materials provided with the distribution.
 *  - Neither the name of Oracle nor the names of its
 *    contributors may be used to endorse or promote products derived
 *    from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */



import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class CanvasDoodleTest extends Application {

    /**
     * Resets the canvas to its original look by filling in a rectangle covering
     * its entire width and height. Color.BLUE is used in this demo.
     *
     * @param canvas The canvas to reset
     * @param color The color to fill
     */
    private void reset(Canvas canvas, Color color) {
        GraphicsContext gc = canvas.getGraphicsContext2D();//创建画笔
        gc.setFill(color);//给画笔添加颜色
        gc.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());//创建一个矩形，高度设为画布高度，宽度设为画布宽度
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Canvas Doodle Test");//创建舞台标题
        Group root = new Group();//设置节点组
        
        // Draw background with gradient
        Rectangle rect = new Rectangle(400, 400);//创建一个矩形
        drawBackground(rect);//画背景，给此矩形对象创建颜色渐变效果
        root.getChildren().add(rect);//节点组容器中添加此矩形对象

        // Create the Canvas, filled in with Blue
        final Canvas canvas = new Canvas(200, 200);//创建一块画布对象
        canvas.setTranslateX(100);//将画布对象位移转变x轴坐标位置
        canvas.setTranslateY(100);//将画布对象位移转变y轴坐标位置
        reset(canvas, Color.BLUE);//将画布重置成蓝颜色
        
        final GraphicsContext gc = canvas.getGraphicsContext2D();//获得此画布对象canvas上面的画笔对象(绘画上下文)
        
        // Clear away portions as the user drags the mouse
        canvas.addEventHandler(MouseEvent.MOUSE_DRAGGED, new EventHandler<MouseEvent>() {//画布对象鼠标拖动事件处理机制
            @Override
            public void handle(MouseEvent e) {//事件处理回调方法
                
                gc.clearRect(e.getX() - 2, e.getY() - 2, 5, 5);//在画布对象上面齿状矩形，利用鼠标拖动事件的x轴鼠标拖动事件对象发生的位置坐标,和鼠标拖动事件在y轴上的坐标值作为矩形起点位置
            }
        });

        // Fill the Canvas with a Blue rectnagle when the user double-clicks
        canvas.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {//画布对象上添加鼠标点击事件处理机制
            @Override
            public void handle(MouseEvent t) { //鼠标事件处理回调函数
                if (t.getClickCount() >1) {
                    reset(canvas, Color.BLUE);//若发生了点击次数超过一次的鼠标点击事件，则将画布重置成蓝色
                }  
            }
        });

        // Add the Canvas to the Scene, and show the Stage
        root.getChildren().add(canvas); //节点组添加画布对象
        primaryStage.setScene(new Scene(root, 400, 400));//舞台上添加场景对象
        primaryStage.show();//舞台展现
    }

    /**
     * Draws the background with a RadialGradient 
     * that transitions from Red to Yellow.
     * @param rect the Rectangle to draw on the Canvas 
     */
    private void drawBackground(Rectangle rect) {//给背景矩形图形创建颜色从红到黄的渐变效果
        rect.setFill(new LinearGradient(0, 0, 1, 1, true,
                CycleMethod.REFLECT,
                new Stop(0, Color.RED),
                new Stop(1, Color.YELLOW)));//给矩形对象添加线性循环反射颜色渐变效果，从红到黄
    }
    
    public static void main(String[] args) {
        launch(args);
    }
    
}