DOC-02-09 使用Canvas API

本章将探索JavaFX Canvas API,并特别提供了可以编译和运行的代码样例。使用第四部分”图形特性教程源码”中提供的链接来下载对应的NetBeans IDE样例工程。

概览

JavaFX Canvas API提供了一个你可以在上面进行绘图的自定义材质。它由javafx.scene.canvas包中的Canvas类和GraphicsContext类来定义。使用此API包括创建一个Canvas对象、获得其GraphicsContext,并且调用绘图操作来在屏幕上渲染你的自定义形状。由于Canvas是Node的一个子类,它可以被用于JavaFX的场景图(Scene Graph)中。

绘制基本形状

BasicOpsTest工程(如图9-1所示)创建了一个Canvas,获得了其GraphicsContext,并且在其中绘制了一些基本形状。使用GraphicsContext类的方法可以绘制直线、椭圆、圆角矩形、弧形、多边形等形状。下载BasicOpsTest.zip文件来完善NetBeans工程BasicOpsTest。

图9-1 在Canvas上绘制形状

2_9_1 optest

例9-1 在Canvas上绘制一些基本形状

如例9-1所示,Canvas初始设置宽300高250,然后通过调用canvas.getGraphicsContext2D()方法获得了它的GraphicsContext。随后通过调用strokeLine、fillOval、strokeArc和fillPolygon等方法执行了一系列基本绘图操作。

应用渐变和阴影

下面的样例(CanvasTest工程)通过绘制一个自定义形状来测试了更多的GraphicsContext类的方法,并应用了一些渐变和阴影效果。最后的结果如图9-2所示。下载CanvasTest.zip文件来完善NetBeans工程CanvasTest。

图9-2 绘制形状、渐变和阴影

2_9_2 canvastest

本例中的代码将每一个绘制操作都组织到了一个独立private方法中。这允许你通过调用(或注释掉)对应的方法来测试不同的特性。想要学好Canvas API,你只需要记住对应代码都基于对Canvas或GraphicsContext对象的调用。

这种模式分为五个主要部分。

首先,Canvas的位置被设置到坐标(0,0)处。通过调用例9-2中的代码实现了此步骤,并且对Canvas对象应用了一个变换。

例9-2 移动Canvas

你可以传入不同的参数值来将Canvas移动到新的位置。你所传入的参数值将会传递给setTranslateX和setTranslateY方法,并且Canvas会进行相应的移动。

其次,在屏幕上绘制了主要的形状(看起来像大写的字母”D”)。它通过调用GraphicsContext的bezierCurveTo方法绘制一条贝塞尔曲线而生成。

例9-3 在屏幕上绘制一条贝塞尔曲线(大写的”D”)

你可以通过改变参数值来对这个形状进行试验。bezierCurveTo方法将会随着你的尝试对形状进行拉伸。

在此之后,一个红色和黄色的射线渐变(RadialGradient)提供了背景中的圆形图案。

例9-4 绘制一个RadialGradient

这里GraphicsContext的setFill方法接受了一个RadialGradient对象作为其参数。同样你可以尝试不同的值或者根据你的喜好传入不同的颜色。

一个线性渐变(LinearGradient)对自定义形状”D”进行了着色,使其从蓝色过渡绿色。

例9-5 绘制一个LinearGradient

这段代码将GraphicsContext的笔触(Stroke)设置为使用LinearGradient,然后使用gc.stroke()对图案进行了渲染。

最后通过调用GraphicsContext对象的applyEffect方法提供了多种色彩的阴影。

9-6 增加一个阴影

如例9-6所示,通过创建带有指定颜色的DropShadow对象,并将其传递给GraphicsContext对象的applyEffect方法在图形上应用了视觉效果。

用户交互

在下面的Demo(CanvasDoodleTest工程)中会在屏幕上显示一个蓝色的方框,它会随着用户在其表面拖动鼠标来擦除其内容。下载CanvasDoodleTest.zip文件来完善NetBeans工程CanvasDoodleTest。

图9-3 用户交互

2_9_3 doodletest

你在上面已经看到了如何创建基本形状和渐变,因此例9-7中的代码主要着重展示了用户交互部分的功能。

例9-7 用户交互

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

图9-4 擦除矩形

2_9_4 doodletest2

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

创建一个而简单的图层系统(Layer System)

你也可以实例化多个Canvas对象,然后使用它们来定义一个简单的图层系统。切换图层就变成了选择所期望的Canvas然后对其进行绘制的过程。(在你在Canvas对象上绘制内容之前,一个Canvas对象是完全透明并且会被穿透。)

这个最终的Demo(LayerTest工程)通过创建两个Canvas并将它们直接叠放在一起定义了这样的一个系统。当你在屏幕上点击鼠标时,一个带有颜色的圆形会在当前被选定的图层上显示出来。你可以使用在屏幕顶部的ChoiceBox来改变图层。添加到图层1上的圆形将会是绿色的,而添加到图层2上的圆形则会是蓝色的。下载LayerTest.zip文件来完善NetBeans工程LayerTest。

图9-5 创建一个简单的图层系统

2_9_5 layertest

这个Demo的GUI使用了BorderPane来管理其组件。一个ChoiceBox被添加到了顶部,而两个Canvas对象被添加到了一个Panel之上,然后它们被放到了屏幕的中央。

例9-9 创建并添加图层

用户交互是通过直接为每个图层添加的一个事件处理器来完成的。在Canvas上单击鼠标将会产生一个MouseEvent,当它被接收到时将会在当前鼠标所在位置绘制一个圆形。

例9-9 增加事件处理器

由于两个图层都直接叠放在一起,仅仅只有最顶层的Canvas才会处理鼠标点击。要将一个指定的图层移到栈的顶端,只需要在屏幕顶端的ChoiceBox组件中选择对应的图层即可。

例9-10 选择一个图层

如例9-10所示,在ChoiceBox上注册了一个ChangeListener,并且通过在对应的Canvas上调用toFront()方法将被选择的图层放到了最顶层。在你添加了很多的蓝色和绿色圆形之后,当你进行切换图层时图层选择操作将会变得更加明显,你将能分辨出(通过观察圆形的边)哪一个图层已经被移动到了顶层。图9-6和图9-7展示了对应的情形。

图9-6 选择Layer1

2_9_6 layer1

图9-7 选择Layer2

2_9_7 layer2

在软件应用程序中选择多个图层是很常见的,例如图像处理程序等。由于每个Canvas对象都是一个Node,因此你可以自由地应用所有你可以应用在其它组件上的标准变换和视觉效果。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/graphics_canvas_api/
百度已收录