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. C#的冒泡排序

    C#实现的从小到大的冒泡排序: public void BubbleSort(int[] array) { int length = array.Length; ; i < length - ; ...

  2. H5Demo_password_generator

    原项目资源地址: https://www.html5tricks.com/js-passwd-generator.html codepen地址: https://codepen.io/deuscx/p ...

  3. BigDecimal精确计算工具类

    前言 在实际开发中,遇到例如货币,统计等商业计算的时候,一般需要采用java.math.BigDecimal类来进行精确计算.而这类操作通常都是可预知的,也就是通用的.所以,写了个工具类来方便以后的工 ...

  4. <packaging>pom</packaging>是什么意思

    <packaging>pom</packaging>是什么意思? 答: 以下配置<packaging>pom</packaging>的意思是使用mave ...

  5. .Net框架的模块代码生成器--其一(dotnet new)

    小白教程声明,首先先介绍一下.Net 框架及模块是什么情况: 1.公司的大佬会把框架的代码打包成Nuget包放在公司的服务器上 2.公司会专门开一个git仓库,存储模块的代码,每个模块都有其独立的文件 ...

  6. 软考复习之UML设计篇

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

  7. Windows显示默认桌面图标(计算机,用户的文件,网络,控制面板,回收站)

    1.按Win+R 2.复制以下命令 rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 3.点击运行,根据需求勾选相应图标即可

  8. 基于90nm CMOS技术的功能齐全的64Mb DDR3 STT-MRAM

    自旋转矩磁阻随机存取存储器(ST-MRAM)有望成为一种快速,高密度的非易失性存储器,可以增强各种应用程序的性能,特别是在用作数据存储中的非易失性缓冲器时设备和系统.为此,everspin开发了基于9 ...

  9. 剑指offer-面试题33-二叉搜索树的后序遍历序列-二叉树遍历

    /* 题目: 给定一个序列,判断它是否为某个二叉搜索树的后序遍历. */ /* 思路: 二叉搜索树:左子树<根节点<右子树. 序列的最右端为根节点,小于根节点的左半部分为左子树,大于根节点 ...

  10. 轻量级RPC设计与实现第三版

    在前两个版本中,每次发起请求一次就新建一个netty的channel连接,如果在高并发情况下就会造成资源的浪费,这时实现异步请求就十分重要,当有多个请求线程时,需要设计一个线程池来进行管理.除此之外, ...