//鼠标坐标:在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. hdu1856 并查集

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1856/ 题目就是要求并查集中各树的大小的最大值,我们只要在根节点处存树的大小就可以,合并也是合并根节点的数,最后 ...

  2. hdu1224SPFA求最长路加上打印路径

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1224/ 无负环. 代码如下: #include<bits/stdc++.h> using names ...

  3. 第十八周java实验作业

    实验十八  总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...

  4. VMware安装Ubutun之SSH为何安装不上之谜

    一把心酸泪,鼻涕泪两行.谁人解我苦中苦,原是SSH安装不上去. 多方找寻,想要寻求解答. 首先我想到一个办法,找到进程,并且狠狠的用RM把它移除掉. NO,这个方法最后竟然不行,文件删了,锁还是获取不 ...

  5. angular中$q用法, $q多个promise串行/同步/等待), $q.all用法,使用

    $q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...

  6. 曹工说Spring Boot源码(27)-- Spring的component-scan,光是include-filter属性的各种配置方式,就够玩半天了.md

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  7. linux入门系列20--Web服务之LNMP架构实战

    作为本入门系列最后一篇文章,将演示如何在CentOS7环境下搭建LNMP环境来构建个人博客网站. 常见搭建网站的方式有LAMP.LNMP.IIS.Nginx.Tomcat等等,本文演示比较流行的基于L ...

  8. Python操作JSON数据代码示例

    #!/usr/bin/env python import json import os def json_test(): return_dic = {} json_data = { 'appid':' ...

  9. Spring中的设计模式:模板模式

    导读 模板模式在是Spring底层被广泛的应用,比如事务管理器的实现,JDBC模板的实现. 文章首发于作者的微信公众号[码猿技术专栏] 今天就来谈谈「什么是模板模式」.「模板模式的优缺点」.「模板模式 ...

  10. Codeforces Round #625 (1A - 1D)

      A - Journey Planning 题意: 有一列共 n 个城市, 每个城市有美丽值 b[i], 要访问一个子序列的城市, 这个子序列相邻项的原项数之差等于美丽值之差, 求最大的美丽值总和. ...