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. Asp.Net Core 3.1 集成Swagger

    引入Nuget包 Swashbuckle.AspNetCore.SwaggerGen Swashbuckle.AspNetCore.SwaggerUI 配置Startup 配置ConfigureSer ...

  2. VBA-FileToFileUpdate

    Public Sub FileToFileUpdate(ByVal fileName As String, ByVal strFrm As String, ByVal strTo As String) ...

  3. 《手把手教你构建自己的 Linux 系统》学习笔记(3)

    需要注意的是,制作操作系统权限全程都要用 root pushd 和 popd 为了方便目录管理,所以出现了这种两个命令,他们的原理就是利用堆栈来实现目录管理. 这两个命令,pushd 负责将指定的目录 ...

  4. 【第二篇】xLua中lua加载方式

     xLua中lua文件加载方式 1. 直接执行字符串方式 LuaEnv luaenv = new LuaEnv(); luaenv.DoString("CS.UnityEngine.Debu ...

  5. nvm Nodejs 版本管理器 安装及配置

    1.如果已安装nodejs请先卸载干净 nodejs:删除C:\Program Files\nodejs 文件夹 npm:删除C:\Users\{用户名}\AppData\Roaming\npm 文件 ...

  6. HDU1408 - 盐水的故事

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1408 解题思路:主要考虑最后一滴可能不满足D毫升,但仍算1秒.另外还要注意浮点数的比较. #inclu ...

  7. Java(三)String类

    一.String类初始化方法 1.初始化一个空字符串 String str=new String();//这里调用了String的无参构造方法 2.初始化一个有值的字符串 String str1=&q ...

  8. redis 4.x及以上的未授权访问

    00x01 环境搭建 选择在kali中复现 选择了redis5.0.5版本 1.下载并安装: $ wget http://download.redis.io/releases/redis-5.0.5. ...

  9. springboot的yml配置文件里有多个参数的调用方式

    本篇教程适用于配置文件一级下有多个二级或三级时,如何在service层不用通过多个@Value就能获取配置文件的参数 例如yml配置是这样的: 如果service层要引用这些参数,用多个@Value( ...

  10. 关于SkinTextBox中SkinTxt的事件使用

    SkinTxt的事件中的事件不能像一般的事件那样在属性中直接双击生成,它里面的事件都需要进行一定的转换间接使用,具体用法如下: 1.手动编写事件需要做的操作的方法 public void txtCod ...