计算机科学论坛--显示贴子

以文本方式查看主题

-  计算机科学论坛  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  使用SVG在浏览器里绘画和注释  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=10642)

--  作者：卷积内核
--  发布时间：9/27/2004 3:08:00 PM

--  使用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>

<g id="canvas" width="800" height="440">

<g id="ball">

<circle cx="200" cy="200" r="100"/>
<g style="visibility:hidden" desc="ObjectProperty">
<text> 
<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"/>

</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)">

<g id="ball"> 
…
</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

--  作者：bgming
--  发布时间：12/15/2004 10:38:00 AM

--
我想做这个方面的开发,相互交流探讨啊
我的联系方式:
      泡泡:bgming@163.com

--  作者：卷积内核
--  发布时间：12/15/2004 3:16:00 PM

--
我的POPO：lhttmy

--  作者：yuxi2000
--  发布时间：12/29/2004 11:15:00 PM

--
我现在也在搞这个
现在有个难题  就是拉筐选择所画的东西
还有就是节点编辑  郁闷阿

--  作者：zhiyu-2000
--  发布时间：12/30/2004 9:29:00 AM

--
拉框选择所画的东西，应该是用一系列的鼠标事件实现的吧！
鼠标按下onmousedown获得鼠标位置，onmouseup确定另一个鼠标位置，然后在这个选框中的图形全被选中。
节点编辑指的是什么？

--  作者：yuxi2000
--  发布时间：12/30/2004 8:18:00 PM

--
就是我可以增删改我svg图上的点、线和多边形等
鼠标事件我知道，就是得到矩形了以后，怎么进行空间判断不知道怎么写

--  作者：zhiyu-2000
--  发布时间：12/31/2004 2:03:00 PM

--
用javasript+svg应该可以完成，就在脚本里面遍历所有的节点，判断他们是否在选框内，如果在的话就改变他们的某些属性，比如颜色，表示选中了，你可以试试！
不过如果节点太多的话，可能比较慢，有什么好的方法告诉我呀！

--  作者：wbz
--  发布时间：1/4/2005 9:25:00 PM

--
用算法就比较快了.

--  作者：zhiyu-2000
--  发布时间：1/5/2005 9:14:00 AM

--
8楼的：
    你指的是什么算法？
    话不要说一半嘛！

--  作者：xinguang
--  发布时间：1/18/2005 11:30:00 PM

--
我用遍历的方法做了个，效果好象还可以

W 3 C h i n a ( since 2003 ) 旗下站点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》

93.750ms