//鼠标坐标:在SVG经过缩放、偏移、ViewBox转换后,鼠标坐标值
var mouseCoord = {
x : .,
y : .
};
//用户坐标:相对于原始SVG,坐标位置
var userCoord = {
x : .,
y : .
};
var cRadius = .; //半径 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 = .; //X偏移
var y_trans = .; //Y偏移
var x_scale = .; //ViewBox导致的X缩放比例
var y_scale = .; //ViewBox导致的Y缩放比例
var scale = .; //缩放比例
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[]) * window.innerWidth;
var v_scale = 1.0 / parseFloat(params[]) * window.innerHeight;
// Update our previously calculated transform
x_trans = x_trans / h_scale + parseFloat(params[]);
y_trans = y_trans / v_scale + parseFloat(params[]);
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文间画图过程中放大缩小图片后,坐标偏移问题的更多相关文章

  1. 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览

    ### 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览 http://segmentfault.com/a/1190000002583569

  2. SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现

    SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现 如下STO,是从公司代码SZSP转入CSAS, 如下图示的内向交货单180018660.该内向交货单是在外向交货单8001632 ...

  3. 016 Android 图片选择器(在选中和未选中的过程中,切换展示图片)

    1.目标效果 在选中和未选中的过程中,切换展示图片 2.实现方法 (1)在app--->res--->drawable 右击drawable文件夹右键,new ---->drawab ...

  4. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. Android 手势滑动,多点触摸放大缩小图片

    效果展示: 基本思路: <1>首先写一个图片控制类ImageControl,实现对图片控制的的基本操作,我们的图片控制类ImageControl是继承自ImageView自定义的视图: & ...

  6. Android多点触摸放大缩小图片

    1.Activity package com.fit.touchimage; import android.app.Activity; import android.graphics.Bitmap; ...

  7. ios 双指捏合放大缩小图片的例子

    图片跟随双指捏合的距离放大或者缩小. 利用-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  实现. touchesMov ...

  8. svg查看预览 , 鼠标控制放大缩小 , 托拉拽等

    自己写是不可能了 , 所以要借用插件 svg-panzoom.js 地址 : https://github.com/ariutta/svg-pan-zoom#demos 及常见问题https://ww ...

  9. 关于asp.net中cookie在调试过程中读写正常发布后乱码问题

    最近在做的项目发布后出现了乱码的问题,既然出现了乱码很大的可能性是跟编码有关系,所以首先的解决方案就是重新对cookie进行编码, 在写入的cookie的时候编码,在读取的时候解码 在写入cookie ...

随机推荐

  1. c# winform 访问WebServices 服务(通过WEB引用的方式进行访问)

    第一步.Winform项目引用WEB服务 第二步.代码声明实例化 Web引用 YzServ.TestServ yzserv = new WebYzServ.TestServ(); yzserv.AAA ...

  2. Shiro RememberMe 1.2.4 反序列化命令执行漏洞复现

    影响版本 Apache Shiro <= 1.2.4 产生原因 shiro默认使用了CookieRememberMeManager,其处理cookie的流程是:得到rememberMe的cook ...

  3. 洛谷 P5596 【XR-4】题 题解

    原题链接 本题只要 推式子 就可以了. \[y^2-x^2=ax + b \] \[a x + x^2 = y^2 - b \] \[4 x^2 + 4 ax = 4 y^2 - 4b \] \[(2 ...

  4. Mybatis详解系列(一)--持久层框架解决了什么及如何使用Mybatis

    简介 Mybatis 是一个持久层框架,它对 JDBC 进行了高级封装,使我们的代码中不会出现任何的 JDBC 代码,另外,它还通过 xml 或注解的方式将 sql 从 DAO/Repository ...

  5. 前端验证,jquery.validate插件

    jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...

  6. Python python 五种数据类型--字符串

    # python 字符串的初始化 var1 = 'hello,world' # python 字符串为不可变类型 var2= var1* 2 print(var1) #hello,world prin ...

  7. 深入调研Linq to Objects Join Linq to Entity

    最近工作中遇到数据库组合查询带来的一些问题,因此有必要调研一下Linq to Objects Join Linq to Entity.参考一些网友的代码案例,深入实践了一下使用EntityFramew ...

  8. 关于HashCode和equals方法在HashSet中的使用

    Object类是类层次结构的根类,故所有的类都是先该类的方法,其中HashCode()和equals()方法也是该类的方法. 1.HashCode()方法 Object类中HashCode()方法实现 ...

  9. C#通用类库整理--字符串处理类

    在程序开发中通常需要将字符串转为自己想要的结果,以下三个类库主要实现: 1.GetStrArray(string str, char speater, bool toLower)  把字符串按照分隔符 ...

  10. 1041 Be Unique (20分)(水)

    Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...