|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
最初被命名为Oak,目标设定在家用电器等小型系统的编程语言,来解决诸如电视机、电话、闹钟、烤面包机等家用电器的控制和通讯问题。js|创立|图形<p>
有一个手艺能够在JavaServerPages(JSP)中发生划一、精密的直方图,它能够用来作为可重用的背景。为了到达可重用性的目标,你必要使得图形的尺寸能够调剂,你还应当办理直方块以避免它们超出图形地区的界限。然后,你还必要把图形数据编码为一种可用的图形格局。我们将使用这个代码例子先容本技能。你必要甚么?
<P>为了入手下手运转本文所给出的例子,你必要JDK1.2大概它的更高版本(http://java.sun.com)。你还必要一个撑持JSP的Web服务器。我在Tomcat上测试该例子,我用com.sun.image.codec.jpeg类(在SunJava2SDK中公布)举行图形数据的编码。
可重用的背景
既然你但愿具有可重用的背景,你应当创立一个Java类来办理结构,包含题目区和内部界限。如图A所示。
图A
正如你所看到的那样,我在题目区和内部界限上都举行了暗影处置。题目有一个红色的、一个象素宽的界限,图形区有一个细的玄色界限。这些界限增添了暗影的明晰度。
界限很简单发生。用Graphics2D对象的fill()办法来添补一个蓝色的题目矩形,然后用draw()办法用别的色彩画出界限。
发生暗影效果也很复杂。起首,用fill()办法画出一个暗影。然后,在偏移七个象素的中央画出题目。这个偏移发生了三维的效果,如许就失掉了暗影效果。
举一个例子
<P>假定有一家公司发卖农产物,它必要一个直方图来显现发卖额。在实践使用场所下,我们必要从一个数据库大概XML文件中猎取这些数据,可是为了复杂起见,我们假定发卖额数据保留鄙人面的两个数组中:
Stringdatanames[]={"苹果","桔子","桃子","柠檬","柚子"};
intdatavalues[]={11,62,33,102,50};
第一个数组保留该公司出卖的各类农产物的项目。第二个数组为对应各农产物的发卖额。
筹办好直方图
直方图将以JPEG格局显现和保留,以是我们必要准确设置MIME,即内容范例。扫瞄器使用MIME范例来决意怎样做出反响。上面的代码用以设置MIME范例:
response.setContentType("image/jpeg");
接上去,我们必要一个暗示该图象的对象。Java2DAPI撑持BufferedImage类,它供应了一种在内存中保留和办理象素数据的办法。我们但愿图形是黑色的,以是利用了TYPE_INT_RGB图形范例。WIDTH和HEIGHT这两个整形数据用来以象素为单元指定该图象的宽度和高度:
BufferedImagebi=newBufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
如今我们有个一个BufferedImage对象,我们能够经由过程挪用该对象的createGraphics()办法来设置Graphics2D的内容:
Graphics2DbiContext=bi.createGraphics();
宽度、高度和极年夜值
创立该图的程序员必要依据该图形的主要水平和页面的全体结构来设置WIDTH参数。图形元素依据图形宽度的改动主动调剂本身的巨细。
题目的宽度和界限地区,和图形的最长直方块必要依据WIDTH参数举行盘算。如许做的目标是为了确保一切的图形元素都没有凌驾图形的宽度而超出图形的右侧界。
必要显现的数据条目数决意了图形的HEIGHT参数。假如有新的元素增加到datavalues[]和datanames[]数组,那末图形的高度就应当对应增加以顺应所需显现的地区巨细。
maximum参数用于最长直方块。然后,别的直方块的宽度依照相对maximum的量举行盘算:
intbarWidth=(innerWIDTH*currentValue)/maximum;
下面的算法用到了maximum和图形的innerWIDTH(图形地区)这两个数值来确保直方块会跟着WIDTH数值的改动而主动伸缩。
显现图形背景
为了显现该图形,我们必要创立一个背景图象,然后增加图形数据。起首,创立一个graphBG对象并挪用它的draw()办法:
graphBGgr=newgraphBG();
gr.draw(biContext,WIDTH,HEIGHT,"FarmProduce","OverallAverage:"+average);
draw()办法的参数包含图形内容、biContext、WIDTH和HEIGHT,graphBG类使用它们来决意题目和图形地区的宽度和高度。最初,盘算average数据值并增加到题目中显现的文本中。
创立直方块
每一个直方块的纵坐标(y轴)地位依照以下公式盘算:y_pos=i*displayHeight+headerOffset。个中displayHeight即是直方块上文本的高度加上直方块的高度,headerOffset暗示从图形顶端入手下手的垂直间隔,包含题目地区和暗影的高度。
我用了后面创立题目界限的手艺创立了这些直方块和它们的界限。我把直方块界限的宽度和高度分离减往一个象素,如许每一个直方块看起来都有一个白色的界限,并经由过程在红色背景上画上内界限使得减切效果的发生变得复杂起来。
编码
我们已在内存中创建好了这幅图片,如今我们对它举行编码并把它显现给用户。我们不克不及用默许得JSP输入流来处置JPEG,以是我们必要使用response.getOutputStream()从呼应对象中猎取流。我们能够用输入流来创立一个JPEGImageEncoder对象并挪用它的encode(),传送我们在后面创立的BufferedImage对象:
JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);
发生的图像绝对较小,只占用了13.7千字节的容量。图B给出了终极的效果:
图B
不管从谁人方面来讲,index.jsp的输入都是一个JPEG图象。你能够把它保留到你的桌面上大概按PrintScreen键来抓图。假如你必要在统一页上显现多幅图形大概把图形引进到别的内容中,你可使用HTML的img标志(<imgsrc=”index.jsp”>),然后,当必要时安排该图,如使用一个表格。
大概最老的用于静态发生图形的Internet手艺之一能够完成处了显现一个图象以外的别的义务。假想你必要纪录这副图的扫瞄人数(相似纪录告白点击次数的情形),那末你必要在index.jsp中完成诸如点击计数、数据库大概文件会见之类的义务,你能够在背景处置这些义务而不必要使用缓冲页面切换给用户。
结论
我们在本文当中查验了一种发生划一、看上往很恬逸的直方图。我们奇妙的处置了图形尺寸的改动和编码为JPEG格局,而且会商了经由过程修正HTML代码的体例把终极发生的图片安排在页面的分歧地位上。
其实产生见解的过程就是训练自己发现问题,分析问题的能力。根据以上的认识我想谈下传统的学习与通过视频独立学习的优缺点: |
|