第5章 C# Web图形开发基础.ppt

第5章C Web图形开发基础 5 1Web开发和桌面图形开发比较 5 2C Web图形开发基本原理 5 1Web开发和桌面图形开发比较 1 对象生存时间Web程序是以HTTP传输协议为基础的 HTTP协议是短期的无状态的 因此在Web开发中 页面对象的生存时间比较短 一般只有几秒 其包含的数据使用完毕后会不可避免的随着页面对象的销毁而销毁 2 数据交换在Web程序中 各个页面之间是比较孤立的 数据交换不畅 虽然可以通过服务器端Session交换数据 但Session是整个Web程序的全局的数据容器 容量有限 使用效率不高 因此各个Web页面之间的数据交换比较复杂 3 执行步骤Web程序中 由于各个页面都可以被外界调用 理论上没有主页面 因此难于精确控制各个页面的执行步骤 难于实现各个页面执行的先后关系 5 1Web开发和桌面图形开发比较 4 用户界面Web程序是完全运行在Web服务器的内存中的 没有任何用户界面 Web程序的主要功能就是自动生成HTML代码 然后让客户端的Web浏览器来解析显示HTML文档 因此Web程序把用户界面的问题完全抛给了Web浏览器 5 软件开发技术开发Web程序使用到的软件开发技术和桌面图形软件的很不一样 开发Web程序需要使用到HTML语法 知道HTTP协议 会写JavaScript或者VBScript等客户端脚本 会使用关系型数据库等等 但基本上较少用到操作系统平台调用 比如调用Win32API函数等 5 2C Web图形开发基本原理 1 图形生成模型一在实践中 可以使用多种Web图形开发模式 比如图5 1所示的是基于临时文件的Web图形程序原理 5 2C Web图形开发基本原理 在这种模式下 程序的执行步骤大致如下 1 Web浏览器向服务器上的某个ASPX页面发出请求 2 服务器的ASPX页面的代码查询数据库 然后在内存中创建一个画布对象 然后绘制图形 并将图像保存到磁盘中的一个临时文件中 然后在输出的HTML代码中输出 3 客户端的Web浏览器接受到HTML代码并解析显示该页面 在遇到 HTML代码时会再次根据这个临时图片文件的访问地址向Web服务器发出请求 4 Web服务器接受Web请求 将图片临时文件中的内容原样返回给客户端Web浏览器 5 客户端Web浏览器接受了图片数据 然后生成图片 并显示出完整的带有图片内容的Web页面 5 2C Web图形开发基本原理 例5 1 设计Web应用程序分别使用以上介绍的方法画图 设计步骤 1 新建ASP NETWeb应用程序项目新建ASP NETWeb应用程序项目并命名为 EX5 1 2 新建存放图片文件夹在ASP NET应用程序中新建一文件夹用于存放图片 文件夹命名为 temp 3 添加命名空间如下 usingSystem Drawing 4 添加控件并设置属性在页面Default aspx页面中添加一个Img标签 Src属性设置为 temp a Png 5 2C Web图形开发基本原理 5 添加Page的Load事件处理代码 代码如下 using Bitmapbmp newBitmap 200 200 using Graphicsg Graphics FromImage bmp g Clear Color DeepPink using Penpen newPen Color Black 5 g DrawEllipse pen 40 30 100 80 bmp Save this Server MapPath temp a Png System Drawing Imaging ImageFormat Png 5 2C Web图形开发基本原理 6 运行结果如图5 2所示 5 2C Web图形开发基本原理 2 图形生成模型二为此设计如图5 3所示的另外的Web图形程序的基本框架 结构虽然比较复杂点 但是这样能避免生成临时图片文件 5 2C Web图形开发基本原理 这个程序框架的运行步骤大致如下 1 客户端Web浏览器向主页面发出请求 2 服务器端接收客户端的页面请求 运行主页面 主页面的程序进行一些处理 比如查询数据库等等 3 主页面的程序根据查询的数据生成一种数据结构能描述图形 或者干脆内存中生成最终显示图片 然后生成图片数据 4 主程序在输出的HTML代码中嵌入Img元素 该Img元素的Src属性指向服务ASPX页面地址 一般还带有页面参数 5 2C Web图形开发基本原理 5 客户端Web浏览器接收了主页面发出的HTML代码 开始解析显示页面 在遇到Img元素时解析出Src属性 然后根据这个Src属性再次向Web服务器的服务ASPX页面发出请求 6 服务器端接收客户端的页面请求 运行服务ASPX页面的代码 代码解析页面参数 然后从临时数据容器中取出描述图形的数据 该数据此前已经被主页面生成好的并保存在临时数据容器中 7 服务ASPX页面根据描述图形的数据在内存中绘制图形生成图片 然后将图片数据输出到HTTP响应流中 8 客户端Web浏览器接受了服务ASPX页面输出的图片数据 然后在页面中显示图片 从而完成整个Web页面的显示 实现了Web图形开发的功能 5 2C Web图形开发基本原理 例5 2 设计Web应用程序分别使用以上介绍的方法画图 设计步骤 1 新建ASP NETWeb应用程序项目并命名为 EX5 2 2 添加一个Web窗体页面用于图像服务 命名为 ImageServer aspx 3 添加命名空间如下 usingSystem Drawing usingSystem IO 4 在Default aspx页面中添加一个Img标签 Src属性设置为 ImageServer aspx 5 2C Web图形开发基本原理 5 添加ImageServer aspx页面的Load事件处理代码 代码如下 using Bitmapbmp newBitmap 200 200 using Graphicsg Graphics FromImage bmp g Clear Color DeepPink using SolidBrushmySBrush newSolidBrush Color Black g DrawEllipse mySBrush 40 30 100 80 using MemoryStreamms newMemoryStream bmp Save ms System Drawing Imagi