zoukankan      html  css  js  c++  java
  • 在svg文间画图过程中放大缩小图片后,坐标偏移问题

      //鼠标坐标:在SVG经过缩放、偏移、ViewBox转换后,鼠标坐标值
          var mouseCoord = {
              x : 0.,
              y : 0.
              };
          //用户坐标:相对于原始SVG,坐标位置   
          var userCoord = {
              x : 0.,   
              y : 0.
              };
          var cRadius     = 4.; //半径
       
        var svgDocument = null;
          var svgRoot     = null;
      
          //获取鼠标事件相关的SVG Document
          function getSVGDocument(evt)
          {
            var target = evt.target;
            var parent = target.parentNode;
            svgDocument = parent.getOwnerDocument();
            svgRoot     = svgDocument.documentElement;
          }
      
          //计算坐标位置:包括用户坐标、鼠标坐标
          function getCoords(evt)
          {
            var x_trans = 0.; //X偏移
            var y_trans = 0.; //Y偏移
            var x_scale = 1.; //ViewBox导致的X缩放比例
            var y_scale = 1.; //ViewBox导致的Y缩放比例
            var scale   = 1.; //缩放比例
            var trans = null;
            var viewbox = null;
           
            getSVGDocument(evt);
          
            scale    = svgRoot.currentScale; //获取当前缩放比例
            trans    = svgRoot.currentTranslate; //获取当前偏移
            //获取SVG的当前viewBox
            viewbox  = svgRoot.getAttributeNS(null, "viewBox"); //获取ViewBox属性
           
            //获取用户坐标:原始SVG的坐标位置
            userCoord.x = evt.getClientX();
            userCoord.y = evt.getClientY();
           
            //计算偏移、缩放等
            x_trans = ( 0.0 - trans.x ) / scale;
            y_trans = ( 0.0 - trans.y ) / scale;
            // Now that we have moved the rectangle's corner to the
            // upper-left position, let's scale the rectangle to fit
            // the current view.  X and Y scales are maintained seperately
            // to handle possible anamorphic scaling from the viewBox
            zoom = scale;
            x_scale = 1.0 / scale;
            y_scale = 1.0 / scale;
            if ( viewbox ) {
                // We have a viewBox so, update our translation and scale
                // to take the viewBox into account
                // Break the viewBox parameters into an array to make life easier
                var params  = viewbox.split(//s+/);
                // Determine the scaling from the viewBox
                // Note that these calculations assume that the outermost
                // SVG element has height and width attributes set to 100%.
                var h_scale = 1.0 / parseFloat(params[2]) * window.innerWidth;
                var v_scale = 1.0 / parseFloat(params[3]) * window.innerHeight;
                // Update our previously calculated transform
                x_trans = x_trans / h_scale + parseFloat(params[0]);
                y_trans = y_trans / v_scale + parseFloat(params[1]);
                x_scale = x_scale / h_scale;
                y_scale = y_scale / v_scale;
            }
           //根据用户坐标、偏移量、缩放等计算鼠标坐标
           mouseCoord.x = userCoord.x * x_scale + x_trans;
           mouseCoord.y = userCoord.y * y_scale + y_trans;
          }
  • 相关阅读:
    C\C++\Java字符串拼接比较
    Visual Assist X支持VS2010高亮显示CUDA代码(Windows 7)
    相似字符串(编程之美2013初赛题2)
    linux mdadm raid阵列重建加速bitmaps文件
    Pig Grunt之简单命令及实例说明
    error: device not found解决
    Spring配置文件错误
    Java贪吃蛇游戏(坐标方法)
    java增强型for循环(三种遍历集合方式)
    酸菜鱼的简单做法
  • 原文地址:https://www.cnblogs.com/smedas/p/12482854.html
Copyright © 2011-2022 走看看