有一个技术可以在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};


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

准备好直方图

直方图将以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参数。图形元素根据图形宽度的改变自动调整自身的大小。

标题的宽度和边界区域,以及图形的最长直方块需要根据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数据值并添加到标题中显示的文本中。

 

创建直方块

每个直方块的纵坐标(y轴)位置按照如下公式计算:y_pos = i * displayHeight headerOffset。其中displayHeight等于直方块上文本的高度加上直方块的高度,headerOffset表示从图形顶端开始的垂直距离,包括标题区域以及阴影的高度。

我用了前面创建标题边界的技术创建了这些直方块以及它们的边界。我把直方块边界的宽度和高度分别减去一个象素,这样每个直方块看起来都有一个红色的边界,并通过在白色背景上画上内边界使得减切效果的产生变得简单起来。

编码

我们已经在内存中建立好了这幅图片,现在我们对它进行编码并把它显示给用户。我们不能用默认得JSP输出流来处理JPEG,所以我们需要利用response.getOutputStream()从响应对象中获取流。我们可以用输出流来创建一个JPEGImageEncoder对象并调用它的encode(),传递我们在前面创建的BufferedImage对象:
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);


产生的图象相对较小,只占用了13.7千字节的容量。B给出了最终的效果:

图B



无论从那个方面来说,index.jsp的输出都是一个JPEG图像。你可以把它保存到你的桌面上或者按PrintScreen键来抓图。如果你需要在同一页上显示多幅图形或者把图形引入到其它内容中,你可以使用HTML的img标记(<img src = ”index.jsp”>),然后,当需要时放置该图,如利用一个表格。

也许最老的用于动态产生图形的Internet技术之一可以实现处了显示一个图像之外的其它任务。设想你需要记录这副图的浏览人数(类似记录广告点击次数的情况),那么你需要在index.jsp中实现诸如点击计数、数据库或者文件访问之类的任务,你可以在后台处理这些任务而不需要利用缓冲页面切换给用户。

结论

我们在本文之中检验了一种产生整齐、看上去很舒服的直方图。我们巧妙的处理了图形尺寸的改变以及编码为JPEG格式,并且讨论了通过修改HTML代码的方式把最终产生的图片放置在页面的不同位置上。

用JSP创建可重用的图形背景的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. swift皮筋弹动发射飞机ios源码

    这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧。

  4. 10.5 Swift类方法

    /**类型方法通过类名称来调用的方法,就像类型属性一样。

  5. Swift与Js通过WebView交互

    开发环境:Swfit2.3XCode8.2基础概念jscontext,jscontext是代表JS的执行环境,通过-evaluateScript:方法就可以执行一JS代码JSValue,JSValue封装了JS与ObjC中的对应的类型,以及调用JS的API等JSExport,JSExport是一个协议,遵守此协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来,才能调用Swif

  6. JSCore swift

    如果双方相互引用,会造成循环引用,而导致内存泄露。以上是Jscore的基本使用,比较简单

  7. Swift WKWebView的js调用swift

    最近项目需求,需要用到JavaScriptCore和WebKit,但是网上的资源有限,而且比较杂,都是一个博客复制另外一个博客,都没有去实际敲代码验证,下面给大家分享一下我的学习过程。

  8. Swift WKWebView的swift调用js

    不多说,直接上代码:在html里面要添加的的代码,显示swift传过去的参数:这样就实现了swift给js传参数和调用!

  9. 在 Swift 專案中使用 Javascript:編寫一個將 Markdown 轉為 HTML 的編輯器

    你有強烈的好奇心,希望在你的iOS專案中使用JavaScript。jscontext中的所有值都是JSValue對象,JSValue類用於表示任意類型的JavaScript值。因此,我們既需要寫Swift代碼也要寫JavaScript代碼。此外,我們還會在JavaScript中按照這個類的定義來創建一個對象并對其屬性進行賦值。從Swift中呼叫JavaScript就如介紹中所言,JavaScriptCore中最主要的角色就是jscontext類。一個jscontext對象是位於JavaScript環境和本

  10. swift - WKWebView JS 交互

    本文介绍WKWebView怎么与js交互,至于怎么用WKWebView这里就不介绍了HTML代码APP调JS代码结果JS给APP传参数首先注册你需要监听的js方法名2.继承WKScriptMessageHandler并重写userContentController方法,在该方法里接收JS传来的参数3.结果

随机推荐

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. Java利用POI实现导入导出Excel表格

    这篇文章主要为大家详细介绍了Java利用POI实现导入导出Excel表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. Mybatis分页插件PageHelper手写实现示例

    这篇文章主要为大家介绍了Mybatis分页插件PageHelper手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  5. Java 阻塞队列BlockingQueue详解

    本文详细介绍了BlockingQueue家庭中的所有成员,包括他们各自的功能以及常见使用场景,通过实例代码介绍了Java 阻塞队列BlockingQueue的相关知识,需要的朋友可以参考下

  6. Java异常Exception详细讲解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  7. Java Bean 作用域及它的几种类型介绍

    这篇文章主要介绍了Java Bean作用域及它的几种类型介绍,Spring框架作为一个管理Bean的IoC容器,那么Bean自然是Spring中的重要资源了,那Bean的作用域又是什么,接下来我们一起进入文章详细学习吧

  8. 面试突击之跨域问题的解决方案详解

    跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。那怎么解决这个问题呢?接下来我们一起来看

  9. Mybatis-Plus接口BaseMapper与Services使用详解

    这篇文章主要为大家介绍了Mybatis-Plus接口BaseMapper与Services使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. mybatis-plus雪花算法增强idworker的实现

    今天聊聊在mybatis-plus中引入分布式ID生成框架idworker,进一步增强实现生成分布式唯一ID,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部