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

    >> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术,以及有关GIS的应用。
    [返回] 计算机科学论坛XML.ORG.CN讨论区 - 高级XML应用『 SVG/GML/VRML/X3D/XAML 』 → 使用SVG在浏览器里绘画和注释 查看新帖用户列表

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

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客楼主
    发贴心情 使用SVG在浏览器里绘画和注释

    使用SVG在浏览器里绘画和注释


    想像一下在浏览器里做下面这些事情:在任何地方(不仅仅在表单域里)输入文本,勾划一个外形,或者使用鼠标画一条线路。也就是说,把浏览器当作一个绘画工具,利用这个额外的能力还能把画好的图保存到数据库里。绘画和保存。有了可伸缩矢量图(SVG)这就是可能的,这是一个2001年9月W3C推荐的2-D Web图形标准。


    这个能力用于注释显示在Web页面上的图像是很有用的。这项技术的商业应用包括注释医疗图像、地图和扫描的文档。

    尽管像IE和Netscape这样在当前很流行的浏览器不能直接生成SVG,但是有来自Adobe(SVG查看器)和其他公司的插件可供使用,用于生成SVG文档。由于SVG是W3C的一个标准,所以我预计它将很快成为浏览器未来版本所内置的功能。

    SVG入门

    SVG图像是矢量图,这意味着所有的图形信息都被保存在一系列用于画线、外形和其他对象的命令里。这些信息最终将会被转化成应用程序专用的位图,也叫做光栅图形。把SVG图像转化成光栅图像是使用浏览器(插件)完成的。注意,这和基于位图的图形,如GIF或者JPEG不同,后者必须在服务器上生成,并作为位图发送给客户。


    SVG图像也是可伸缩的。放大SVG图像不会造成图像的变形(锯齿边缘),因为是用于再次生成图像的指令,而不是位图像素值被送到了生成程序。

    SVG是如何让你在浏览器里绘画的?

    SVG文件是XML格式的。当它被发送给浏览器/SVG插件的时候,所有的内容都被保存在文档对象模型(DOM)里。SVG提供了一个API来捕捉鼠标和键盘事件,并操控DOM。让我们看一个说明这个问题的例子吧。

    用于矢量图形命令的XML格式

    Listing A管窥了XML风格的句法。它就像事务实体的对象模型,并带有绘图属性和对象属性。当这个文件使用SVG插件在浏览器里被打开的时候,你会看看到一个环。要测试这一点,从Adobe的Web网站下载和安装SVG插件。然后,创建一个新的文件Circle.svg,把其代码复制到文件里,并从Web浏览器里打开这个文件。

    操控DOM


    DOM是一个用于访问、添加、删除和更改SVG-XML文档内容的API。例如,当浏览器读取Circle.svg的时候,SVG插件里的DOM被这个文件所包含的所有信息填充,然后这个环就在浏览器里被生成了。操控DOM内容(它包含有那个环)的一种方法是使用SVG提供的API。对于一个像这个样的例子,看看Listing B所示的JavaScript程序。当页面被载入的时候,它除了环以外,还会划一条直线。


    这个API还提供了一种机制来处理事件,例如onmousedown、onmousemove和onmouseup。例如,看看Listing C里带有三个JavaScript函数的SVG-XML文件。这个例子说明了如何使用SVG API来捕捉鼠标事件,以及如何改变DOM。


    注意,尽管出于说明的目的,我们包括进了OMM()函数,但是我们没有为其提供任何代码。如果想画一条路线而不是一条直线,你可以使用这个函数而不是OMU()和OMD()。你也可以捕捉onclick、onkeydown和onkeyup鼠标和键盘事件。


    这个机制基本上是用于在浏览器上绘图的:

    捕捉鼠标(或者键盘)事件。
    捕捉鼠标坐标或者键盘信息。
    更改DOM。
    当DOM发生改变的时候,(SVG)插件就提示浏览器在DOM里画新的元素。


    动态SVG

    SVG也支持动画。例如,考虑一下Listing D,在这里,鼠标的点击会在一秒钟之内把球的半径从100增加到200。


    --------------------------------------------------------------------------------
    那么数据又会怎样呢?
    尽管我们的例子一直都在关注使用DOM操控图形信息,但是你也可以用它来和数据库进行交互操作。DOM的元素和数据能够使用JavaScript来收集,并在表单被提交到服务器的时候被送到数据里。
    --------------------------------------------------------------------------------

    结论

    基于浏览器的事务应用接口只允许有限数量的输入控件,例如文本框、下拉框和单选框。SVG能够充分打开通向更加丰富的用户交互操作的大门——从在浏览器的任何地方输入文本到绘制圆、直线和直角等规则图形,再到在触摸屏上使用手写笔在空白处绘画或者添加注释。


    IE和Netscape这两个常用的浏览器不能够直接生成SVG。但是SVG是W3C的一个标准,所以这个功能很有可能在不久的将来被集成进这些浏览器里。

    Listing A


    <?xml version="1.0"?>
    <svg>
    <!--size of canvas-->
    <g id="canvas" width="800" height="440">
    <!--Group tag with a name (id) -->
    <g id="ball">
    <!--command to draw circle with center cx,cy, radius r -->
    <circle cx="200" cy="200" r="100"/>
    <g style="visibility:hidden" desc="ObjectProperty">
    <text> <!--Ball has a property called weight -->
    <tspan desc="weight">33.0 ounce</tspan>
    </text>
    </g>
    </g>
    </g>
    </svg>

    Listing B


    <html>
    <head>
    <script>
    /* draw a line on the canvas*/
    function drawLine(X1, Y1, X2, Y2) { //adds line element to DOM
    SVGDoc = this.document.map.getSVGDocument();
    newElem = SVGDoc.createElement("line");
    newElem.setAttribute('x1', X1); newElem.setAttribute('y1', Y1);
    newElem.setAttribute('x2', X2); newElem.setAttribute('y2', Y2);
    SVGDoc.getElementById("ball").appendChild(newElem);
    }
    </script>
    </head>
    <body onload="drawLine(0,0,100, 300)">
    <embed name="map" src="circle.svg" width="800" height="440"/>
    <!-- SVG document is embedded in HTML -->
    </body>
    </html>

    Listing C


    <?xml version="1.0"?>
    <svg>
    <g id="canvas" width="800" height="440" onmousedown="OMD(evt)" onmousemove="OMM(evt)" onmouseup="OMU(evt)">
    <!--handling mouse events on canvas-->
    <g id="ball"> <!--Group tag with a name (id) -->

    </svg>
    var X1,Y1,X2,Y2; // global variables in javascript
    function OMD(mouseEvt) {
    //on mouse down capture coordinates of start point
    X1 = mouseEvt.getClientX();
    Y1 = mouseEvt.getClientY();
    }
    function OMU(mouseEvt) {
    // on mouse up capture coordinates of end point and draw line
    X2 = mouseEvt.getClientX();
    Y2 = mouseEvt.getClientY();
    drawLine(X1,Y1,X2,Y2);
    }
    function OMM(mouseEvt) {
    // Do nothing
    }

    Listing D


    <svg width="800" height="440">
    <g id="ball">
    <circle cx="200" cy="200" r="100">
    <animate begin="click" attributeName="r" from="100" to="200" dur="1s" fill="freeze"/>
    </circle>
    </g>
    </svg>


       收藏   分享  
    顶(0)
      





    关闭广告显示

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

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/9/27 15:08:00
     
     bgming 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:5
      积分:79
      门派:XML.ORG.CN
      注册:2004/12/13

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给bgming发送一个短消息 把bgming加入好友 查看bgming的个人资料 搜索bgming在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看bgming的博客2
    发贴心情 
    我想做这个方面的开发,相互交流探讨啊
    我的联系方式:
          泡泡:bgming@163.com
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/15 10:38:00
     
     卷积内核 帅哥哟,离线,有人找我吗?
      
      
      威望:8
      头衔:总统
      等级:博士二年级(版主)
      文章:3942
      积分:27590
      门派:XML.ORG.CN
      注册:2004/7/21

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客3
    发贴心情 
    我的POPO:lhttmy

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

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/15 15:16:00
     
     yuxi2000 帅哥哟,离线,有人找我吗?
      
      
      等级:大二期末(C++考了100分!)
      文章:61
      积分:324
      门派:XML.ORG.CN
      注册:2004/12/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给yuxi2000发送一个短消息 把yuxi2000加入好友 查看yuxi2000的个人资料 搜索yuxi2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看yuxi2000的博客4
    发贴心情 
    我现在也在搞这个
    现在有个难题  就是拉筐选择所画的东西
    还有就是节点编辑  郁闷阿

    ----------------------------------------------
    http://yuxi2000.blogchina.com

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/29 23:15:00
     
     zhiyu-2000 美女呀,离线,快来找我吧!
      
      
      等级:大三(面向对象是个好东东!)
      文章:77
      积分:547
      门派:XML.ORG.CN
      注册:2004/12/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客5
    发贴心情 
    拉框选择所画的东西,应该是用一系列的鼠标事件实现的吧!
    鼠标按下onmousedown获得鼠标位置,onmouseup确定另一个鼠标位置,然后在这个选框中的图形全被选中。
    节点编辑指的是什么?
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/30 9:29:00
     
     yuxi2000 帅哥哟,离线,有人找我吗?
      
      
      等级:大二期末(C++考了100分!)
      文章:61
      积分:324
      门派:XML.ORG.CN
      注册:2004/12/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给yuxi2000发送一个短消息 把yuxi2000加入好友 查看yuxi2000的个人资料 搜索yuxi2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看yuxi2000的博客6
    发贴心情 
    就是我可以增删改我svg图上的点、线和多边形等
    鼠标事件我知道,就是得到矩形了以后,怎么进行空间判断不知道怎么写

    ----------------------------------------------
    http://yuxi2000.blogchina.com

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/30 20:18:00
     
     zhiyu-2000 美女呀,离线,快来找我吧!
      
      
      等级:大三(面向对象是个好东东!)
      文章:77
      积分:547
      门派:XML.ORG.CN
      注册:2004/12/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客7
    发贴心情 
    用javasript+svg应该可以完成,就在脚本里面遍历所有的节点,判断他们是否在选框内,如果在的话就改变他们的某些属性,比如颜色,表示选中了,你可以试试!
    不过如果节点太多的话,可能比较慢,有什么好的方法告诉我呀!
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/31 14:03:00
     
     wbz 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:5
      积分:78
      门派:XML.ORG.CN
      注册:2004/11/24

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给wbz发送一个短消息 把wbz加入好友 查看wbz的个人资料 搜索wbz在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看wbz的博客8
    发贴心情 
    用算法就比较快了.
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2005/1/4 21:25:00
     
     zhiyu-2000 美女呀,离线,快来找我吧!
      
      
      等级:大三(面向对象是个好东东!)
      文章:77
      积分:547
      门派:XML.ORG.CN
      注册:2004/12/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客9
    发贴心情 
    8楼的:
        你指的是什么算法?
        话不要说一半嘛!
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2005/1/5 9:14:00
     
     xinguang 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:7
      积分:108
      门派:XML.ORG.CN
      注册:2004/12/21

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给xinguang发送一个短消息 把xinguang加入好友 查看xinguang的个人资料 搜索xinguang在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看xinguang的博客10
    发贴心情 
    我用遍历的方法做了个,效果好象还可以
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2005/1/18 23:30:00
     
     GoogleAdSense
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2025/7/14 2:44:59

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

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