`

在svg文间画图过程中放大缩小图片后,坐标偏移问题

 
阅读更多

http://blog.csdn.net/qingcai20071141/article/details/6257184

  //鼠标坐标:在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;
分享到:
评论

相关推荐

    实现SVG图片放大缩小及拖动功能

    实现SVG图片的Pan and Zoom 功能

    svg在移动端的应用-手势图片拖动,手势放大缩小

    在移动端,SVG的优势在于文件小、加载速度快,且支持交互性,这正是"svg在移动端的应用-手势图片拖动,手势放大缩小"这个主题的核心内容。 1. SVG的基础知识: - SVG是一种开放标准的图形格式,用于描绘2D图形,它...

    图片 svg 放大缩小 鼠标拖动功能

    支持 图片 svg div 等的拖动,放大 ,缩小,代码都写好了,直接可以跑

    Qt实现svg图片在label上显示(图片可放大缩小)

    整理Qt例程中的svg图片显示,将显示图片放在label控件上(重写事件过滤器方法,参照料此方法可放在其他控件上),环境为ubuntu16.04 + Qt5.6.1,在win+Qt环境下程序工程也可打开编译(亲测)。

    放大缩小svg图片工具

    利用软件Inkscape Portable可以很容易将svg放大或是缩小 当然它还可以将其他格式的图片转为svg 一:打开svg图标 二:按住鼠标左键,拖着鼠标将图标完全框住,就会出现下图界面 此时通过箭头就可以调整图标大小了 三...

    SVG-web 画图

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形,包括线条、形状、渐变、透明度等元素,而且这些图形可以无限放大而不会失真。SVG在Web画图中扮演着重要角色,...

    snap.svg 中文参考手册 离线php版

    1. **SVG基础**:SVG是一种开放标准的矢量图形语言,可以在网页上创建清晰、可缩放的图形,无论放大多少倍都不会失真。Snap.svg利用SVG的优势,为开发者提供了丰富的API来操作SVG元素。 2. **Snap.svg对象模型**:...

    java 放大缩小图片

    根据提供的文件信息,本文将详细解释如何使用Java进行图片放大与缩小的相关知识点,包括关键类库的导入、图片...需要注意的是,在实际开发过程中,还需要考虑到错误处理、性能优化等问题,以确保程序的稳定性和效率。

    滚轮实现多个svg的放大缩小

    滚轮实现多个svg的放大缩小,根据鼠标位置来判断对哪个svg进行操作

    图片懒加载svg-loading图片

    在"loading-svg图片"这个主题中,我们将探讨如何使用SVG实现一个动态的加载指示器,并将其应用到图片懒加载技术中。首先,我们需要创建一个SVG元素,定义其形状、路径或符号,并利用CSS或者JavaScript来控制其动画...

    svg画图(汽车)

    svg画图,用画图工具画的svg格式的汽车,供大家参考

    SVG画图工具,整套源码

    SVG画图工具是一种创新性的在线解决方案,它允许用户在网页浏览器中直接进行可缩放矢量图形(SVG)的设计和编辑。SVG作为一种矢量图像格式,具有无损放大、清晰度不变、文件小巧等优点,因此在网页设计、图标制作、...

    实现类似地图放大缩小图片

    在IT行业中,实现类似地图放大缩小图片的功能是常见的图像处理技术,主要应用于地图应用、图像查看器、设计软件等。这种技术的核心在于图像的平移、缩放以及平滑处理,确保用户在查看高分辨率图像时能有良好的交互...

    vue使用svg文件补充-svg放大缩小操作(使用d3.js)

    针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路:我的想法就是循环拿到里面的id,然后跟后台的数据匹配,然后赋值。因为后台返回的数据id是没有...

    svg 局部放大

    然而,在实现SVG局部放大的过程中,可能会遇到一些问题,如描述中提到的“空隙”问题以及在缩小过程中不正确缩放的问题。 **SVG的基本结构与属性** SVG文件由一系列的图形元素组成,如路径(`<path>`)、矩形(`...

    svg中文手册.zip

    路径是SVG中最基础的构造块,通过线段、曲线等几何形状定义出复杂的图形。形状如矩形、圆形、椭圆、线和多边形可以直接使用SVG元素来绘制。文本元素支持文本的排版和样式控制,可以与图形元素结合,实现图文并茂的...

    svg动态画图

    在SVG中,图像由一系列的元素构成,如矩形、圆形、椭圆、线条和文本等。以下是对这些基本元素的详细解释: 1. **矩形 `<rect>`**:矩形可以通过`<rect>`元素创建,通过设置`x`, `y`, `width`, `height`属性来定义其...

Global site tag (gtag.js) - Google Analytics