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