用JSP创建可重用的图形背景

2016-01-29 12:08 3 1 收藏

用JSP创建可重用的图形背景,用JSP创建可重用的图形背景

【 tulaoshi.com - Java 】

  有一个技术可以在Java Server Pages(JSP)中产生整齐、精细的直方图,它可以用来作为可重用的背景。为了达到可重用性的目的,你需要使得图形的尺寸可以调整,你还应该管理直方块以免它们越过图形区域的边界。然后,你还需要把图形数据编码为一种可用的图形格式。我们将利用这个代码例子介绍本技巧。 你需要什么?

为了开始运行本文所给出的例子,你需要JDK 1.2或者它的更高版本(http://java.sun.com)。你还需要一个支持JSP的Web服务器。我在Tomcat上测试该例子,我用com.sun.image.codec.jpeg 类(在Sun Java 2 SDK中发布)进行图形数据的编码。

可重用的背景

既然你希望拥有可重用的背景,你应该创建一个Java类来管理布局,包括标题区和外部边界。如A所示。

图A



正如你所看到的那样,我在标题区和外部边界上都进行了阴影处理。标题有一个白色的、一个象素宽的边界,图形区有一个细的黑色边界。这些边界增加了阴影的清晰度。

边界很容易产生。用Graphics2D对象的fill()方法来填充一个蓝色的标题矩形,然后用draw()方法用其它颜色画出边界。

产生阴影效果也很简单。首先,用fill()方法画出一个阴影。然后,在偏移七个象素的地方画出标题。这个偏移产生了三维的效果,这样就得到了阴影效果。

举一个例子

假设有一家公司销售农产品,它需要一个直方图来显示销售额。在实际应用场合下,我们需要从一个数据库或者XML文件中获取这些数据,但是为了简单起见,我们假设销售额数据保存在下面的两个数组中:
String datanames[] = {"苹果", "桔子", "桃子", "柠檬", "柚子"};
int datavalues[] = {11, 62, 33, 102, 50};


第一个数组保存该公司出售的各种农产品的项目。第二个数组为对应各农产品的销售额。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/java/)准备好直方图

直方图将以JPEG格式显示和保存,所以我们需要正确设置MIME,即内容类型。浏览器利用MIME类型来决定如何做出反应。下面的代码用以设置MIME类型:
response.setContentType("image/jpeg");

接下来,我们需要一个表示该图像的对象。Java 2D API支持BufferedImage类,它提供了一种在内存中保存和管理象素数据的方法。我们希望图形是彩色的,所以使用了TYPE_INT_RGB图形类型。WIDTHHEIGHT这两个整形数据用来以象素为单位指定该图像的宽度和高度:
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);

现在我们有个一个BufferedImage对象,我们可以通过调用该对象的createGraphics()方法来设置Graphics2D的内容:
Graphics2D biContext = bi.createGraphics();

宽度、高度和极大值

创建该图的程序员需要根据该图形的重要程度和页面的整体布局来设置WIDTH参数。图形元素根据图形宽度的改变自动调整自身的大小。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/java/)

标题的宽度和边界区域,以及图形的最长直方块需要根据WIDTH参数进行计算。这样做的目的是为了确保所有的图形元素都没有超过图形的宽度而越过图形的右边界。

需要显示的数据条目数决定了图形的HEIGHT参数。如果有新的元素添加到datavalues[]datanames[]数组,那么图形的高度就应该对应增长以适应所需显示的区域大小。

maximum参数用于最长直方块。然后,其它直方块的宽度按照相对于maximum的量进行计算:
int barWidth = (innerWIDTH * currentValue) / maximum;

上面的算法用到了maximum和图形的innerWIDTH(图形区域)这两个数值来确保直方块会随着WIDTH数值的改变而自动伸缩。

显示图形背景

为了显示该图形,我们需要创建一个背景图像,然后添加图形数据。首先,创建一个graphBG对象并调用它的draw()方法:
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Farm Produce", "Overall Average: " + average);

draw()方法的参数包括图形内容、biContext、WIDTHHEIGHTgraphBG类利用它们来决定标题和图形区域的宽度和高度。最后,计算average数据值并添加到标题中显示的文本中。

 

来源:http://www.tulaoshi.com/n/20160129/1484782.html

延伸阅读
标签: Web开发
%@page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"% %!   //create by smallnest   //email: smallnest@gmail.com   //website:www.kuaff.com   //生成随机颜色   Color getRandColor(Random random, int fc, int bc) {  &nb...
扫描和描摹 真实的手绘并扫描插图是获得粗略风格作品的最简易方法。对于这项技巧来说 ,AI 的实时描摹和实时上色功能很棒。 步骤1 – 手绘 我通常是用铅笔绘图,完成以后再用墨水为插图上色。为插图上色能产生插图间的对比。因而更容易得到好的描摹效果。 步骤2 – 扫描 以 300 dpi 扫描图像。当描摹插图的时候,300 dpi 的画...
介绍一个有Toolbar功能的可重用类 CPopupText 赵湘宁 本文例子代码背景:我用一个CListBox派生类实现宿主(owner-draw)列表框,这个列表框的项目宽度超过了列表框本身的宽度,因此当鼠标指针指向大宽度的列表框项时,我想显示一个类似Toolbar的提示窗口,在窗口中显示完整的列表框项目文本。 ...
标签: 办公软件
我们都知道,Excel中的图表广泛地应用于数据显示和分析,它可以通过图形的方式直观地表示出数值大小及变化趋势等。如果善用Excel中的一些技巧,不使用图表功能也能创建出好看又好用的图表,我们且称之为“非图形图表”。 本文将介绍如何创建一个非图形图表。在创建时使用了函数功能来实现在几个单元格中显示模拟的数据条,使用函数的又一...
PS创建梦幻迷离的彩虹背景   先上效果图: 先来渲染一片星空~ 1)打开ps创建如下文件(记住哦,背景是白色的) 2)新建图层,选择画笔工具设置大小为6px 100%的硬边。前景色设为黑色。 3)按住shift键垂直往下作一直线。 4)选择滤镜模糊动感模糊,并进行以下设置: 5)复制(ctrl+j)两次该图层...