`
知春路人
  • 浏览: 8527 次
社区版块
存档分类
最新评论

Web图形技术的一些调研

阅读更多

Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案。

Web图表一般有以下几种做法: 

(1)使用客户端控件技术 

(2)使用服务器端生成图片 

(3)使用富客户端技术 

1、使用客户端控件技术 

应用微软的ActiveX控件以及Java的applet技术对图形的支持来显示一个图表。这种方式显然对于客户端要求太高,插件的开发相对麻烦,随着现在主流浏览器放弃对控件的支持后,这种方式只适合一些局域网的应用,而对于因特网的环境就显得不太适合。

2、使用服务器端生成图片 

直接在Web服务器端生成好图表图片文件后发送到浏览器。 

优点:服务器端生成图形,减轻客户端负担。 

缺点:Web应用时,特别是动态生成图片,会产生大量的冗余图片数据。 

3、使用富客户端技术 

根据服务器返回数据在浏览器端绘制图表,一般有以下几种方案: 

(1)VML技术 

VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。 

优点:基于XML标准,支持高质量的矢量图形显示。结合脚本,可以让图形产生动态的效果。

缺点:只能在IE浏览器或以IE为内核的浏览器才能用VML。 

(2)SVG技术 

SVG(可放缩的矢量图形)是W3C在2000年8月制定的一种新的二维矢量图形的格式。 

优点:基于XML标准,采用文本来描述对象,具有交互性和动态性,完全支持DOM。 

缺点:IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能在IE中显示SVG格式图像。 

(3)多比控件 

多比图形控件出现简化了这种开发难度,它是一款基于Web的矢量图形控件,能够检测浏览器类型,自动选择VML或SVG方案进行做图,类似于网页上的Visio控件,是目前国内外最佳的基于Web矢量图案解决方案。多比图形编辑器实现了图形、图像、文字的有机统一。它除了支持HTML中常用 的标记,如文本、图像、链接、交互性、CSS的使用、脚本外,还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为:SVG图形文件经XML解析器打开,并在内存中生成一个对象树,用鼠标事件来驱动脚本执行,脚本通过DOM接口对象进行相关的操作,来实现图形绘制、编辑等功能。

缺点:商业的东西,要米的。 建议大公司采用 

(4)Flash技术 

Open Flash Chart是一个Flash图表组件,很容易安装,提供以下语言的API:PHP、Perl、Python、Java、Ruby on Rails、.NET来控件图表。 

优点:图形效果好,根据服务器数据生成相应的图形,可以适当编写事件处理。 

缺点:需要Flash插件支持,绘制特定的图形需要专业的Flash技术支持。 

(5)Canvas技术 

<canvas>是一个新的HTML无素,这个元素可以被Script语言用来绘制图形。例如可以用它来画图、合成图像、做简单的动画。 

优点:基于标准规范、灵活绘制各类图形。 

缺点:IE需要使用canvas.js类支持图形的扩展。 

(6)JavaScript图形库技术(jsgraphics) 

JavaScript图形库可以在网页上动态绘制圆、椭圆、斜线、折线、多边形(三角形、矩形)。底层通过创建大量1px*1px的DIV实现,同时对于连续的像素进行优化,尽量地减少所需的DIV,因此有较好的性能,当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML、HTML 、Canvas是无法相比较的。

优点:使用Web的基本技术实现图形化,不需要任何的扩展或支持。 

缺点:图形非矢量,曲线情况下平滑度不够,图形较多时性能存在一定的问题。 

分享到:
评论

相关推荐

    基于xml技术的石油行业专业数据图形web发布系统可行性论证报告.pdf

    报告的标题和描述都提到了基于XML技术的石油行业专业数据图形WEB发布系统(PetroWeb Service 1.0)的可行性研究,这是一项旨在利用XML技术在互联网上发布石油行业的专业数据和图形的项目。XML(Extensible Markup ...

    HTML技术调研报告

    2.2.1. 当前的Web通信—轮询(Polling) 传统的HTTP协议是基于请求-响应模式的,对于实时性要求高的应用(如聊天、游戏),需要不断轮询服务器以获取最新数据,这既耗时又浪费资源。 2.2.2. HTML5 WebSocket ...

    Web信息采集技术研究与发展.pdf

    它不仅支持搜索引擎的工作,还广泛应用于网站结构分析、网页有效性评估、Web图形演变研究、内容安全性检测、用户兴趣挖掘和个人化信息服务等多个领域。本文将围绕Web信息采集技术的研究现状和发展趋势进行探讨,主要...

    基于Web20技术的数据库审计管理系统的设计与实现.doc

    在实现环节,论文以统计报告模块为例,展示了审计系统的具体实施细节,强调了Web2.0技术在提高用户交互性方面的应用,如Ajax实现无刷新交互,jQuery简化JavaScript操作,Flash提升图形化展示质量。这些技术的应用...

    WebSpider蓝蜘蛛网页取

    8. **用户友好的界面**:WebSpider蓝蜘蛛网页取通常具有直观的图形用户界面,使得非编程背景的用户也能方便地配置和运行爬虫任务。 通过【其他类别】WebSpider蓝蜘蛛网页抓取 v5.1_webspider这个文件,用户可以获得...

    WebKit在iOS上的技术调研

    ### WebKit在iOS上的技术调研 #### 一、基本信息 - **背景**:随着移动互联网的发展,特别是苹果iOS系统的兴起,对于跨平台应用的需求日益增长。Tang1.1项目计划在iPad上提供一套完整的会议服务,使得iPad用户能够...

    软件技术综合训练课程设计-Web浏览器程序设计.doc

    【软件技术综合训练课程设计-Web浏览器程序设计】 在当今互联网时代,Web浏览器作为网络接入的主要工具,其设计与开发是软件技术中的一个重要课题。本课程设计旨在让学生掌握Web浏览器的基本原理,运用Java编程语言...

    大创-大学生创新创业大赛之Web3D短视频学习教育平台项目设计.zip

    Web3D技术是指通过互联网展示三维图形的技术,它允许用户在网页上直接体验三维场景,无需额外安装插件或应用。核心技术包括 WebGL (Web Graphics Library) 和 Three.js 等JavaScript库,它们能够与HTML5结合,实现...

    HTML5可行性调研

    HTML5还引入了Canvas画布技术,用于动态图形绘制,为游戏和数据可视化提供可能。地理位置API允许获取用户的地理位置信息,实现位置服务。跨文档消息机制(Cross-document messaging)和XMLHttpRequest Level 2改进了...

    OpenStack Compute调研及安装

    2.3 安装OpenStack基于Web的管理控制台:比如Horizon,提供图形化界面供管理员和用户操作。 2.4 Nova 存储管理:配置Nova与Cinder或本地存储的连接,为虚拟机提供持久化存储。 2.5 问题及可能的解决方案:在安装过程...

    WEB设计大全

    视觉设计是WEB设计的基础,涉及到色彩理论、排版、图形元素和图像选择等。设计师需要理解如何通过颜色传达情感,如何布局元素以引导用户视线,以及如何选择合适的图像增强网站的吸引力。例如,07.pdf可能详细讲解了...

    基于Html关键技术的WEB塔防类游戏植物大战僵尸的设计和实现.doc

    1. **文献调研**:收集相关资料,了解HTML5的相关技术和游戏设计的基本原则。 2. **需求分析与模块划分**:明确游戏功能需求,将游戏分为不同的功能模块,如游戏界面、角色行为、游戏逻辑等。 3. **开发与实现**:...

    网页设计调研报告.doc

    W3C 和 WHATWG 监控并批准的标准和技术推动了网页设计的进步,如Web 2.0风格对艺术字的运用。然而,技术的快速更新意味着设计界面的生命周期较短,创新和模仿并存,经典与潮流交织。 在国内,网页设计的认知水平...

    前沿技术报告

    HTML5是HTML、XHTML及HTML DOM的标准,标志着Web技术的巨大飞跃。本部分详细介绍了HTML5的关键特性和应用场景。 ##### 1. HTML5简介 - **背景**:自1999年以来,Web世界发生了翻天覆地的变化,HTML5旨在满足这些...

    基于Java Web的高校干部学习图谱信息系统的设计与实现.pdf

    1. 学习图谱技术:学习图谱是一种图形化的学习资源管理工具,能够帮助高校干部更好地管理和利用学习资源,提高学习效率。 2. Java Web 技术:Java Web 技术是基于 Java 语言的 Web 应用程序开发技术,能够快速开发...

    行业分类-设备装置-Web多媒体资源开放标注数据的可视化方法及装置.zip

    7. **应用场景**:可能涵盖社交媒体分析、新闻趋势追踪、市场调研、教育辅导等领域,通过可视化Web多媒体资源的开放标注数据,可以揭示隐藏的模式、趋势和关联,支持决策制定。 8. **技术实现**:文档可能涉及HTML5...

    程序员简历-web前端开发

    **技术研究与调研**:他致力于现有前端界面的改进和Web前沿技术的研究。这显示了他对技术趋势的敏锐度和持续学习的能力,有助于保持技术领先。\n\n5. **项目管理**:作为前端组长,他负责把控项目质量,合理分配...

    web在线设计流程图

    在这个过程中,设计师们使用各种工具和技术来创建直观、用户友好的界面,以提升网站或应用的交互性和可访问性。以下是对这个主题的详细阐述: 1. **项目启动**:在设计流程的初期,团队会进行项目规划,明确项目...

    软件技术专科毕业设计(论 文)

    - 采用HTML、CSS、Ajax等现代Web技术,保证系统的交互性和响应速度; - 利用Lingui等工具进行多语言支持,满足国际化需求; - 开放式架构便于第三方应用集成,增强系统灵活性。 ### 3. 项目实施与维护 - **实施...

Global site tag (gtag.js) - Google Analytics