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. SynchronizationContext(同步上下文)综述

    >>返回<C# 并发编程> 1. 概述 2. 同步上下文 的必要性 2.1. ISynchronizeInvoke 的诞生 2.2. SynchronizationContex ...

  2. Java基础之四、字符和字符串 异常处理

    字符和字符串是最常用的信息 1:char表示字符 字符常量-两个单引号中间的字符表示字符常量'A' 2:字符串和String 字符串常量-双引号中间的字符序列"Java" 字符串常 ...

  3. vim 进化 编码问题

    " 解决菜单乱码 source $VIMRUNTIME/delmenu.vim source $VIMRUNTIME/menu.vim " 防止文件显示乱码 set fileenc ...

  4. 查看mysql是否锁表了

    1.查看表是否被锁: (1)直接在mysql命令行执行:show engine innodb status\G. (2)查看造成死锁的sql语句,分析索引情况,然后优化sql. (3)然后show p ...

  5. linux之定时任务调度

    crond:任务调度 任务调度:是指系统在某个时间执行特定的程序或命令 任务调度分类: (1)系统工作,有些重要的工作必须周而复始地进行,如病毒扫描等 (2)个别用户工作:个别用户可能希望执行某些程序 ...

  6. Swift -POP( 面向协议编程)与OOP(面向对象编程)

    面向协议编程(Protocol Oriented Programming,简称POP),是Swift的一种编程范式,Apple于2015年WWDC提出的,如果大家看Swift的标准库,就会看到大量PO ...

  7. 软考复习之UML设计篇

    UML统一建模语言 构件图:描述系统的物理结构,它可以用来显示程序代码如何分解成模块 部署图:描述系统中硬件和软件的物理结构,它描述构成系统架构的软件构件,处理器和设备 用例图:描述系统与外部系统及用 ...

  8. clr via c# 程序集

    1,程序集的种类 强命名程序集 使用了公钥进行签名 可以应用CLR的安全策略.---可以全局部署---可以部署到一些公认位置. 弱命名程序集 只能私有部署----部署到应用程序基目录或其子目录中 2, ...

  9. ES6常用语法(二)

    arrow functions (箭头函数) 函数的快捷写法.不需要 function 关键字来创建函数,省略 return 关键字,继承当前上下文的 this 关键字 // ES5 var arr1 ...

  10. LOJ #2876. 「JOISC 2014 Day2」水壶 BFS+最小生成树+倍增LCA

    非常好的一道图论问题. 显然,我们要求城市间的最小生成树,然后查询路径最大值. 然后我们有一个非常神的处理方法:进行多源 BFS,处理出每一个城市的管辖范围. 显然,如果两个城市的管辖范围没有交集的话 ...