06
2013
09

JavaFX的Canvas

JavaFX的Canvas与HTML5的Canvas非常类似,甚至连API都基本相同。使用方法无非也就是一些画线、画框、绘图图片什么的,这里我挑一些要点做简单介绍,具体内容可参照官方Canvas教学

  • 创建Canvas并获得绘制2D绘图环境:

    Canvas canvas = new Canvas(width , height);

    getGraphicsContext2D gc = canvas.getGraphicsContext2D();


  • 设置字体相关:

  • //加载字体文件

    Font.loadFont(getClass().getResource("resource/DroidSansFallback.ttf").toExternalForm(), 12);

    //设置字体、字号

    gc.setFont(Font.font("Droid Sans Fallback", 14));

    //设置文本绘制的锚点

    gc.setTextBaseline(VPos.TOP);


  • 获得文本像素尺寸:

  • JavaFX中我没有找到类似Android中Paint.measureText()方法,要获得一个字符串的像素尺寸暂时只好通过创建Text对象来获取,

    public double getTextPixWidth(GraphicsContext gc, String str)

    {

        Text text = new Text(str);

        text.setFont(gc.getFont());

        return text.getLayoutBounds().getWidth();

    }

    

    public double getTextPixHeight(GraphicsContext gc, String str)

    {

        Text text = new Text(str);

        text.setFont(gc.getFont());

        return text.getLayoutBounds().getHeight();

    }


  • 一些常用的绘制方法:

  • //清除一个矩形区域

    gc.clearRect(0, 0, 480, 320);

        //设置绘制颜色

        gc.setFill(Color.GRAY);

        //填充一个矩形

        gc.fillRect(x, y, w, h);

        //绘制一个空心矩形

        gc.strokeRect(x, y, w, h);

        //加载一张图片资源

        Image img = new Image(new File(filePath).toURI().toString());

        //绘制图象到指定坐标

        gc.drawImage(img, x, y);

        //绘制图片到指定坐标,并指定拉伸的尺寸

        gc.drawImage(img, x, y, w, h);

        //指定区域、尺寸和位置绘制图象

        gc.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);


  • 剪切区:

        和Android一样,JavaFX也有save()和restore(),同样的也可以设置剪切区,并且利用path和clip,JavaFX中可以设置各种形状的剪切区来实现各种复杂的绘制。设置矩形剪切区的例子:

        gc.save();

        gc.beginPath();

        gc.rect(x, y, w, h);

        gc.clip();


        gc.setFill(Color.GRAY);

        gc.fillRect(0, 0, gc.getCanvas().getWidth(), gc.getCanvas().getHeight() );


        gc.restore();


  • 画布刷新与效率:

  • 目前JavaFX是单线程模型,并不能像Android一样UI线程与绘制线程分开。所以JavaFX程序的效率很低,尤其是用Canvas时,即便是官方提供的Canvas弹球游戏的例子,同样CPU占用很高,希望以后Oracle多加优化。JavaFX中实现画布刷新是通过Timeline设置动画帧数、关键帧等信息来完成的:

            //画布刷新率控制

            final Duration oneFrameAmt = Duration.millis(1000 / 30);

            final KeyFrame oneFrame = new KeyFrame(oneFrameAmt, new EventHandler<ActionEvent>()

            {

                

                @Override

                public void handle(ActionEvent event)

                {

                    //some paint methods...

                    //some paint methods...

                }

            });

            TimelineBuilder.create()

                    .cycleCount(Animation.INDEFINITE)

                    .keyFrames(oneFrame)

                    .build()

                    .play();




« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。