新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术,以及有关GIS的应用。
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - 高级XML应用『 SVG/GML/VRML/X3D/XAML 』 → 利用SVG和Java实现Web显示数学特殊符号 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 4766 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: 利用SVG和Java实现Web显示数学特殊符号 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     卷积内核 帅哥哟,离线,有人找我吗?
      
      
      威望:8
      头衔:总统
      等级:博士二年级(版主)
      文章:3942
      积分:27590
      门派:XML.ORG.CN
      注册:2004/7/21

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客楼主
    发贴心情 利用SVG和Java实现Web显示数学特殊符号

    网络的飞速发展使得人们能够在不同时间、空间交流。然而目前交流还只限于文本方式或简单的、事先编辑好的图片。当讨论数学问题时,人们常常苦于无法用简单的数学符号直接表达准确的意思,这大大限制了远程教学的发展。同时使网络交流停留在近乎原始的方式上,可以说仅仅只是用文字代替了语音。本文介绍利用SVG和Java开发包处理这一问题的解决方案。通过此种方案,在不同网络终端的用户可以用近似于MathLab中的数学语言描述自己想要得到的数学符号,由服务器动态生成数学符号图像,并向其它终端发送。
    现有的几种方案
      目前网上解决数学符号显示的方案有以下几种:

    * MathML这是W3C根据XML标准制定出的在网络上显示数学符号的语言,但它非常复杂,并且目前IE暂时不支持需要的插件。同时,由于它需要在客户端解释显示,速度也是一个问题。

    * Applet 在以前的教学软件中就有使用Applet解决数学符号显示的例子,但是速度问题和微软对Applet的抵制使得它已逐渐失去生命力。

    * SVG 虽然IE目前也暂不支持,但它的插件相对而言很容易得到。只要安装了Acrobat Reader,插件就自动装上了。


      相关技术

      XML

      扩展标记语言(XML,eXtensible Markup Language)是一种可扩展的元置标语言。XML是由SGML(Standard General Markup Language)发展而来的语言,其目标是为了适应Web应用环境,将网络上传输的文档规范化。它用文档的结构标记定义手段来表达文档内容的语义元素及其关联,从而提供了网上数据交换的语义格式标准,以及各类业务文档置标语言标准的实现方法。

      XSLT

      XSLT(Extensible Stylesheet Language Transformation)是一种将XML文档转换成其它类型文档的语言。

      JAXP

      JAXP(Java API for XML Processing)是Sun公司推出的一种最新的XML工具包。支持最新的DOM和SAX API。

      SVG

      SVG(Scalabel Vector Graphics)是一种以XML格式描述二维图形的规范。这些XML文档以.svg扩展名结尾,并且可由SVG浏览器读取这些文件,然后显示。目前大多数Web浏览器都支持用插件或ActiveX控件(比如Adobe SVG Brower)查看SVG文档。之所以称“可缩放矢量图形”是因为SVG处理的是矢量类型的图形,而不是光栅类型的图形。矢量图形是可缩放的,并且在图形缩放或旋转时不会降低分辨率或模糊细节。可缩放矢量图形还可以采用轻巧的可移植格式描绘复杂图形。与其它格式比较起来,矢量图形格式主要优点在于:第一,用于包含图形信息的文件尺寸较小;第二,组织信息的方式便于理解。

      在SVG中所有图像都由图元组成,例如line、path、text等。

      JSP

      JSP(Java Serve Page)能在Web Server端整合Java语言至HTML网页环境中,利用网页内含的Java程序代码取代原有的CGI、ISAPI或者IDC的程序。主要用于动态网页的制作。

      设计思路

      要显示数学符号,显然不能用ASCⅡ字符,这就需要一种可定制的图形规范,SVG正好充当了这一角色。SVG是以XML格式描述二维图形的规范,并且能够动态生成,这一点正好便于生成数学符号。

      数学公式的描述可以用XML来完成。XML在描述有序嵌套结构时非常方便、清晰,而且它本身是树结构,而数学公式可以抽象成为树形结构。例如以下数学符号可以抽象为图1。

    按此在新窗口浏览图片

      数学符号

      其中可以自己定义一些符号元素,例如<sqr>根号、<number>数字、<sigma>求和符号等。再为这些元素加上描述其特点的属性,例如<sqr>要有根号的长度等。这样就可以把一个数学公式的信息完整地描述出来。由于我们的目标是显示,因此上(下)标等都可以看作兄弟元素,统一用<number>表示。

    按此在新窗口浏览图片

      图1 公式结构树

      由于在SVG中显示的图形都是由图元组成的,因此需要根据图元定义符号显示格式。如图2对于字母或数字,按照现行的字形规则定义,对于特殊符号定义它的一些特征部位的格式。

    按此在新窗口浏览图片

      图2 显示格式定义

      根据SVG图元显示的特点,每个图元都需要指定坐标。因此在定义完格式后还需要得到显示的坐标数据,例如根号就需要最左端的坐标、高度、宽度,数字则只需知道起始位置的坐标,如图3。

    按此在新窗口浏览图片

      图3 显示坐标数据

      为了用户输入方便,在系统中定义了一套输入规则,其中关键字是以“$”开头,由三个字母组成,如表1。

    表1 自定义关键字

      符号的子元素在“[ ]”内描述。特殊符号,例如求和符、上下界等用“,”分开。例如上述的数学符号就可以表示为:$SQR[243$SIG[n, i=1] X $INX[i] ]。

      这里要说明的是,定义词法时尽量符合书写习惯,避免过多的嵌套,例如变量的下标和变量属于兄弟关系而不是父子关系。

      图4是将用户输入转变为图形显示的主要流程图,其中通过JAXP包将XML描述的公式树转化为SVG文件。在显示时可根据情况将SVG转变为JPG格式或直接嵌入网页中。

    按此在新窗口浏览图片

    图4 用户输入转变为图形显示的流程图

      一个例子

      将前一节的描述语句$SQR[243$SIG[n, i=1] X $INX[i] ] 编译得到的XML文件为:

    math.xml
    <?xml version=“1.0” encoding=“UTF-8”?>
    <math>
    <sqr d=“M74,27 L20,27 L15,57 L10,52”>
    <number x=“20” y=“50” level=“4”>243</       number>                               
    <number x=“47” y=“36” level=“2”>n</number>
    <number x=“44” y=“62” level=“2”>i=1</number>
    <sigma d=“M62,38 L44,38 L57,43 L44,50 L62,50” />
    <number x=“62” y=“50”level=“4”>X</number>
    <number x=“70” y=“52”level=“2”>i</number>
    </sqr>
    </math>

      将其用JAXP和math.xsl转换为的SVG文件为:

    math.svg
    <?xml version=“1.0”encoding=“UTF-8”?>
    <svg width=“”height=“”>
    <path d=“M74,27 L20,27 L15,57 L10,52”style=“fill:none;stroke:black;”/>
    <text x=“20” y=“50” style=“font-size:12pt;”>243</text>243
    <text x=“47” y=“36” style=“font-size:8pt;”>n</text>n
    <text x=“44” y=“62” style=“font-size:8pt;”>i=1</text>i=1
    <path d=“M62,38 L44,38 L57,43 L44,50 L62,50” style=“fill:none;stroke:black;”/>
    <text x=“62” y=“50” style=“font-size:12pt;”>X</text>X
    <text x=“70” y=“52” style=“font-size:8pt;”>i</text>i
    </svg>

    最后得到的显示图形见图5。

    按此在新窗口浏览图片

    图5 运行结果图

      此外,这种模式还可以用于化学符号、地图等特殊符号的显示。特别是在网络服务和瘦客户端发展趋势下,这种仅需要浏览器的处理机制会得到大力发展。


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    事业是国家的,荣誉是单位的,成绩是领导的,工资是老婆的,财产是孩子的,错误是自己的。

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2007/8/11 17:21:00
     
     GoogleAdSense
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/12/2 0:03:30

    本主题贴数1,分页: [1]

    管理选项修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    1,481.995ms