新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   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制作对话框问题 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 10208 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: svg制作对话框问题 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     342989854 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:6
      积分:66
      门派:XML.ORG.CN
      注册:2010/6/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给342989854发送一个短消息 把342989854加入好友 查看342989854的个人资料 搜索342989854在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看342989854的博客楼主
    发贴心情 svg制作对话框问题

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

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


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2010/6/12 11:23:00
     
     342989854 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:6
      积分:66
      门派:XML.ORG.CN
      注册:2010/6/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给342989854发送一个短消息 把342989854加入好友 查看342989854的个人资料 搜索342989854在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看342989854的博客2
    发贴心情 
    我把代码展示如下:
    <?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 Drop(evt){
             if (DragTarget){
                var targetElement = evt.target;
                DragTarget.setAttributeNS(null, "pointer-events", "all");
                if ("Folder" == targetElement.parentNode.id){
                   targetElement.parentNode.appendChild( DragTarget );
                }
                else{}
                DragTarget = null;
             }
          };

          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>

    <rect id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all" />
          <g id="Folder">
          <rect id="FolderRectangle" x="200" y="100" width="50" height="50" style="fill:blue; stroke:brown; stroke-width:3;"/>
          </g>


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

            <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/ecmascript"><![CDATA[

                var myMapApp = new mapApp();

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

                var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5};
                var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
                var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
                var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
                var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"};
                var statustextStyles ={"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};
                var buttonStyles = {"fill":"none","stroke":"dimgray","stroke-width":1};
                var titlebarHeight = 25;
                var statusbarHeight = 13;//对话框
                var textStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray"};
                var boxStyles = {"fill":"white","stroke":"dimgray","stroke-width":1.5};
                var cursorStyles = {"stroke":"red","stroke-width":1.5};
                var selBoxStyles = {"fill":"blue","opacity":0.5};
    myMapApp.textbox = new textbox("textbox1","textbox1","",25,180,75,100,30,22,textStyles,boxStyles,cursorStyles,selBoxStyles,"[a-zA-Z ]",undefined);
    //文本框
                var textStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray"};
                var boxStyles = {"fill":"white","stroke":"dimgray","stroke-width":1.5};
                var cursorStyles = {"stroke":"red","stroke-width":1.5};
                var selBoxStyles = {"fill":"blue","opacity":0.5};
    myMapApp.textbox = new textbox("textbox2","textbox2","",25,180,120,100,30,22,textStyles,boxStyles,cursorStyles,selBoxStyles,"[a-zA-Z ]",undefined);
    //文本框
                 myMapApp.Windows["bigWindow"] = new Window("bigWindow","Windows",
                    400,300,50,150,true,0,80,1024,700,true,
                    winPlaceholderStyles,windowStyles,3,true,true,
                    "","This is a big movable window",true,true,true,
                    titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,
                    titletextStyles,statustextStyles,buttonStyles,windowEvents);
        
                myMapApp.Windows["bigWindow"].appendContent("textbox1",true);
                myMapApp.Windows["bigWindow"].appendContent("mingcheng",true);
                myMapApp.Windows["bigWindow"].appendContent("zhuangtai",true);
                myMapApp.Windows["bigWindow"].appendContent("textbox2",true);
                myMapApp.Windows["bigWindow"].appendContent("queding",true);
                myMapApp.Windows["bigWindow"].appendContent("quxiao",true);
            }
    function windowEvents(id,evtType)
          {
                }


        ]]></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文件中编写,希望大家多帮忙,头疼啊,谢谢~~~

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2010/6/12 15:55: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/23 3:39:31

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

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