中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (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=85296)

--  作者：342989854
--  发布时间：6/12/2010 11:23:00 AM

--  svg制作对话框问题
各位大大，我想在svg文件中，点击一个按钮，能弹出svg制作的对话框，里面能输入文字之类的，该怎么弄呢，对话框怎么做的，或者能否在svg文件中调用其它非svg制作的对话框，比如jsp制作的，都该怎么实现呢？

本人菜鸟，请多多帮忙，谢谢，或者提供这种例子，万分感谢啦

--  作者：342989854
--  发布时间：6/12/2010 3:55:00 PM

--
我把代码展示如下：
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width="100%" height="100%"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   preserveAspectRatio="xMidYMid meet"
zoomAndPan="magnify"
onload="Init(evt)" onmousedown="Grab(evt)" onmousemove="Drag(evt)" onmouseup="Drop(evt)">
<defs>
<menu id='Menu' >
  <header>Menu utilisateur</header>
  <item id='Menu0' onactivate="insert(evt)">添加节点</item>
  <item id='Menu1' onactivate='cd1()'>菜单1</item>
  <item id='Menu2' onactivate='cd2()'>菜单2</item>
  <item id='none1'/>
  <item id='Menu3' action="ZoomOut">缩小</item>
  <item id='Menu4' action="ZoomIn">放大</item>
  <item id='none2'/>
  <item id='Menu5' action='ViewSource'>浏览源代码</item>
</menu>
</defs>

<title>Drag And Drop</title>
<script type="text/ecmascript" xlink:href="../chuangkou/helper_functions.js"/>
        <script type="text/ecmascript" xlink:href="../chuangkou/mapApp.js"/>
    <script type="text/ecmascript" xlink:href="../chuangkou/timer.js"/>
       <script type="text/ecmascript" xlink:href="../chuangkou/Window.js"/>
       <script type="text/ecmascript" xlink:href="../chuangkou/textbox.js"/>
      <script type="text/ecmascript" xlink:href="../chuangkou/button.js"/>
<script type="text/javascript"><![CDATA[

     var c=1;
     var prr;//初始化菜单
      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var GrabPoint = null;
      var BackDrop = null;
      var DragTarget = null;

     function Init(evt){
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
         TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
         BackDrop = SVGDocument.getElementById("BackDrop");//拖动
         root=SVGDocument.rootElement;//添加
         var newMenuRoot=parseXML(printNode(SVGDocument.getElementById('Menu')),contextMenu);
         contextMenu.replaceChild(newMenuRoot,contextMenu.firstChild);
         prr=SVGDocument.getElementById("rr");

}

      function Grab(evt){
         var targetElement = evt.target;
         if (BackDrop != targetElement){
            DragTarget = targetElement;
            DragTarget.parentNode.appendChild(DragTarget);
            DragTarget.setAttributeNS(null, "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
         }
      };

      function Drag(evt){
         GetTrueCoords(evt);
         if (DragTarget){
            var newX = TrueCoords.x - GrabPoint.x;
            var newY = TrueCoords.y - GrabPoint.y;
            DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");
         }
      };

      function GetTrueCoords(evt){
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      };
          function  insert(evt)
    {
        obj=evt.target;

}

]]></script>

</svg>

上面一段是svg文件，首先自定义了右键菜单，而且增加了移动功能，我的目的是在右键菜单的添加节点中触发insert（）事件，添加下面我定义的对话框
对话框如下：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?AdobeSVGViewer save="snapshot"?>
<svg width="100%" height="100%" viewBox="0 0 1024 700" onload="init(evt)"
xmlns:batik="http://xml.apache.org/batik/ext"
xmlns:attrib="http://www.carto.net/attrib"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
zoomAndPan="magnify">

var myMapApp = new mapApp();

        function init(evt) {
            myMapApp.Windows = new Array();
            myMapApp.textbox=new Array();

]]></script>
<text id="mingcheng" x="50" y="100" style="font-size:20">名称</text>
<text id="zhuangtai" x="50" y="140" style="font-size:20">连接状态</text>
<text id="queding" x="50" y="250" style="fill:red; font-size:20px; font-weight:bold;">确定</text>
<text id="quxiao" x="250" y="250" style="fill:red; font-size:20px; font-weight:bold;">取消</text>

</svg>
我不知道如何实现这两svg文件的交互，或者怎么把定义的对话框直接在第一个svg文件中编写，希望大家多帮忙，头疼啊，谢谢~~~

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

4,644.531ms