新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   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 』 → 【求助2】关于viewBox拖拽后的偏移~有经验的大大指导下~! 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 8594 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: 【求助2】关于viewBox拖拽后的偏移~有经验的大大指导下~! 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     kd2008 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:4
      积分:72
      门派:XML.ORG.CN
      注册:2008/5/26

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给kd2008发送一个短消息 把kd2008加入好友 查看kd2008的个人资料 搜索kd2008在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看kd2008的博客楼主
    发贴心情 【求助2】关于viewBox拖拽后的偏移~有经验的大大指导下~!

    我先说下我现在要实现的要求,我要通过一个svg中一个元素(比如一个rect)的id,让页面定位放大显示以这个元素为中心的场景,现在通过修改viewBox属性已经能定位元素了,但是现在有两个问题,首先是定位显示的场景的大小确不固定(每次查找后放大缩小不一样),好像靠得比较边的元素会显示得很大,然后再定位中间点的又会缩放到很小,不知道为什么?第二个问题也是最重要的问题,就是我如果使用了svg Viewer提供的拖拽功能,显示区域好像就整体偏移了,我再定位,定位后的viewBox就没办法准确找到元素了,这时viewBox好像加载了我拖拽的偏移量,我不知道怎么把这个处理掉,让它拖拽后还是能准确定位。希望知道的大大能不吝赐教,实在感谢了!

       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/6/13 17:42:00
     
     tamefox 美女呀,离线,快来找我吧!魔羯座1980-1-1
      
      
      威望:1
      等级:大四(每天看1小时莱昂氏)
      文章:129
      积分:1236
      门派:XML.ORG.CN
      注册:2005/7/6

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给tamefox发送一个短消息 把tamefox加入好友 查看tamefox的个人资料 搜索tamefox在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看tamefox的博客2
    发贴心情 
    我觉得第二个问题你最好把系统提供的拖拽功能屏蔽掉

    ----------------------------------------------
    无为而无所不为
    有为而有所不为

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/6/22 7:52:00
     
     tommypeng 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:1
      积分:74
      门派:XML.ORG.CN
      注册:2009/3/4

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给tommypeng发送一个短消息 把tommypeng加入好友 查看tommypeng的个人资料 搜索tommypeng在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看tommypeng的博客3
    发贴心情 
    LZ的问题可以回答你:
          这个问题涉及到embed容器和SVG图形本身两个坐标系统,也就是说SVG图形中某个节点的偏移(放大)量与两个坐标系统息息相关。如果仅仅针对SVG图形本身这个坐标系统来讲,某个节点的偏移和放大量你应该很容易得到吧?那么请再想一下,SVG图形本身与embed容器间的坐标关系又是如何的呢?请看mbed两个属性width和height,它们与SVG图形本身的大小在你获取该节点的算法中构成一个比例关系,也是算法的一个必要条件。
          我对SVG研究不是很深,但我在项目中完成过一个功能:在有上百个节点的拓扑图中,通过查找得到一个节点,并将它自动移动到屏幕中间(注意是屏幕,这样又产生了第三个坐标系统),不管你移动过多少次,放大缩小多少次,可以放到屏幕的中间。这是由一个比较复杂的算法实现的,通过采集20多条数据推导出的一个公式。
         还有就是在GIS系统中用到SVG的矩阵变换,也是关于坐标系统的,略知一二,用的是中国地图,节点是精确的经纬度坐标,由于项目不需要如此精确,在代码里都被我注了,放着以后用的着的时候用。
         SVG的坐标系统是挺有意思的,等你搞懂了,就什么都不怕了,其他都是很easy的问题。
         给你些思路,祝你也能实现这个功能!我不是经常上来看的,不知道什么时候再来看一看,呵呵。
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2009/3/4 16:17:00
     
     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的博客4
    发贴心情 [求助]关于鼠标拖拽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;
    };

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2009/3/9 19:46: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/22 5:06:18

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

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