function getCoords(evt) {

// 计算出当前屏幕与svg的比例
    var canvas = document.getElementById("canvase");
    var viewbox = svgRoot.getAttributeNS(null, "viewBox"); //获取ViewBox属性
    var params = viewbox.split(" ");
    // 屏幕和svg的比例 这是初始化比例
    var roteX =  svgRoot.clientWidth / parseFloat(params[2])  ;
    var roteY =  svgRoot.clientHeight / parseFloat(params[3])  ;

// 用户点击的svg原始坐标,当成屏幕坐标
    userCoord.x = evt.layerX;
    userCoord.y = evt.layerY;

console.log(svgRoot)
    // 如果平移
    var tx = parseFloat(params[0]),
        ty = parseFloat(params[1]);
    // 如果缩放
    // var x_scale = 1 / roteX,
    //     y_scale = 1 / roteY;

// svg坐标
    mouseCoord.x = (userCoord.x/roteX+tx)
    mouseCoord.y = (userCoord.y/roteY+ty)
    
  }

svg 放大缩小后的比例的更多相关文章

  1. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  2. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  3. C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  4. Android实现图片放大缩小

    package com.min.Test_Gallery; import android.app.Activity; import android.graphics.Bitmap; import an ...

  5. 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  6. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  7. hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  8. Android多点触控技术,实现对图片的放大缩小平移,惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

  9. 自定义mousewheel事件,实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

随机推荐

  1. Git操作:查看所有分支的提交修改

    我们在廖雪峰Git教程或者一些书籍学习git分支时,大都会学习到这样一个命令git log --graph或者就是单纯的git log,他可以用来查看当前分支.但是这个弊端就是:它只能查看与当前分支有 ...

  2. Ajax工作原理及优缺点

    1. Ajax是什么? 全称是 asynchronous javascript and xml,是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果(无需重新加载整个网页的情况下),实现页面的 ...

  3. nodejs爬虫--抓取CSDN某用户全部文章

    最近正在学习node.js,就像搞一些东西来玩玩,于是这个简单的爬虫就诞生了. 准备工作 node.js爬虫肯定要先安装node.js环境 创建一个文件夹 在该文件夹打开命令行,执行npm init初 ...

  4. java动态拼接sql语句并且执行时给sql语句的参数赋值

    问题 在这里举一个例子,比如我要做一个多条件模糊查询,用户输入的时候有可能输入一个条件,也有可能输入两个条件,这时执行查询的sql语句就不确定了,但可以用动态拼接sql语句来解决这个问题. 解决方法 ...

  5. 关于MY Sql 查询锁表信息和解锁表

    1.查询锁住表信息 show OPEN TABLES where In_use > 0; 2.查看进程  show processlist; 3.解开锁住的表 需要杀掉锁住表的相关进程Id. k ...

  6. oracle 取某个时间的数据(每周几的上午几点到几点)

    select count(*),t.分组字段 from (select t.* ,to_char(t.时间,'HH24') stime,to_char(t.时间,'HH24mi') fz,to_cha ...

  7. nginx: [warn] conflicting server name "aaa.7yule.cn" on 0.0.0.0:80, ignored

    故障现象: 修改nginx配置参数后,使用nginx -t检查配置,出现告警提示 nginx: [warn] conflicting server name "aaa.7yule.cn&qu ...

  8. P1308 统计单词数(cin,getline() ,transform() )

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  9. Java使用POI读取Word中的表格

    个人博客 地址:https://www.wenhaofan.com/a/20190627135921 代码 package live.autu.word; import java.io.FileInp ...

  10. 使用pip安装Python库超时解决办法

    如果在国内安装Python库,强烈推荐使用豆瓣的源http://pypi.douban.com/simple/ 可以这样使用 pip install -i http://pypi.douban.com ...