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

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 4722 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: [求助]关于鼠标拖拽svg图像 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     zz2119_cn 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:6
      积分:70
      门派:XML.ORG.CN
      注册:2009/3/6

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给zz2119_cn发送一个短消息 把zz2119_cn加入好友 查看zz2119_cn的个人资料 搜索zz2119_cn在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zz2119_cn的博客楼主
    发贴心情 [求助]关于鼠标拖拽svg图像

    下面这段代码是我从网上找的,是实现鼠标拖拽svg图像,但是我运行时,会报错。
    TrueCoords = SVGRoot.createSVGPoint();
    GrabPoint = SVGRoot.createSVGPoint();
    就是上面这两行代码报错,说没有该createSVGPoint()属性。
    请大家看看如何解决!


    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;

        // these svg points hold x and y values...
        //    very handy, but they do not display on the screen (just so you know)
        TrueCoords = SVGRoot.createSVGPoint();
        GrabPoint = SVGRoot.createSVGPoint();

        // this will serve as the canvas over which items are dragged.
        //    having the drag events occur on the mousemove over a backdrop
        //    (instead of the dragged element) prevents the dragged element
        //    from being inadvertantly dropped when the mouse is moved rapidly
        BackDrop = SVGDocument.getElementById(svgmain);
    }

    function Grab(evt) {
        // find out which element we moused down on
        var targetElement = evt.target;

        // you cannot drag the background itself, so ignore any attempts to mouse down on it
        if (BackDrop != targetElement) {
            //set the item moused down on as the element to be dragged
            DragTarget = targetElement;

            // move this element to the "top" of the display, so it is (almost)
            //    always over other elements (exception: in this case, elements that are
            //    "in the folder" (children of the folder group) with only maintain
            //    hierarchy within that group
            DragTarget.parentNode.appendChild(DragTarget);

            // turn off all pointer events to the dragged element, this does 2 things:
            //    1) allows us to drag text elements without selecting the text
            //    2) allows us to find out where the dragged element is dropped (see Drop)
            DragTarget.setAttributeNS(null, 'pointer-events', 'none');

            // we need to find the current position and translation of the grabbed element,
            //    so that we only apply the differential between the current location
            //    and the new location
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);

        }
    };


    function Drag(evt) {
        // account for zooming and panning
        GetTrueCoords(evt);

        // if we don't currently have an element in tow, don't do anything
        if (DragTarget) {
            // account for the offset between the element's origin and the
            //    exact place we grabbed it... this way, the drag will look more natural
            var newX = TrueCoords.x - GrabPoint.x;
            var newY = TrueCoords.y - GrabPoint.y;

            // apply a new tranform translation to the dragged element, to display
            //    it in its new location
            DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
        }
    };


    function Drop(evt) {
        // if we aren't currently dragging an element, don't do anything
        if (DragTarget) {
            // since the element currently being dragged has its pointer-events turned off,
            //    we are afforded the opportunity to find out the element it's being dropped on
            var targetElement = evt.target;

            // turn the pointer-events back on, so we can grab this item later
            DragTarget.setAttributeNS(null, 'pointer-events', 'all');
            if ('Folder' == targetElement.parentNode.id) {
                // if the dragged element is dropped on an element that is a child
                //    of the folder group, it is inserted as a child of that group
                targetElement.parentNode.appendChild(DragTarget);
                alert(DragTarget.id + ' has been dropped into a folder, and has been inserted as a child of the containing group.');
            }
            else {
                // for this example, you cannot drag an item out of the folder once it's in there;
                //    however, you could just as easily do so here
                alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id);
            }

            // set the global variable to null, so nothing will be dragged until we
            //    grab the next element
            DragTarget = null;
        }
    };


    function GetTrueCoords(evt) {
        // find the current zoom level and pan setting, and adjust the reported
        //    mouse position accordingly
        var newScale = SVGRoot.currentScale;
        var translation = SVGRoot.currentTranslate;
        TrueCoords.x = (evt.clientX - translation.x) / newScale;
        TrueCoords.y = (evt.clientY - translation.y) / newScale;
    };


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2009/3/9 19:47: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/4/29 4:33:33

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

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