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. VUE 是个 M V VM框架

    vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...

  2. echarts--可拖动的曲线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Jean-Pierre Serre访问录

    问:是什么使您以数学为职业的? 答:我记得大概是从七.八岁时起喜欢数学的.在中学里, 我常做一些高年级的题目.那时,我寄宿于Nimes,与比我大的孩子住在一起,他们常常欺侮我,为了平抚他们,我就经常帮 ...

  4. python—lambda函数,三个常用的高阶函数

    """lambda 参数列表 : 返回值lambda 参数形式: 1.无参数:lambda:100 2.一个参数:lambda a: a 3.默认参数:lambda a, ...

  5. 10maven依赖继承、统一版本/编码

    A >  B  >  C A依赖于B,B依赖于C,如果A想间接依赖C,那么B和C之间的依赖范围必须是compile,不然A依赖不了C 但是有点麻烦,因为每次A想依赖于C都要确认B和C之间的 ...

  6. Java中Thread方法启动线程

    public class ThreadTest extends Thread {  private int count = 10; @Override public void run() { //重写 ...

  7. Spring Boot源码(六):Bean的创建详解

    继续之前的项目: People加上无参构造方法: @Component public class People { // private User user; public People(){ Sys ...

  8. The ADB binary found at ... 虚拟机运行错误

    虚拟机问题,可以说差点扼杀我开发 APP 的乐趣,哼,最后请教了一下辉哥(学长),终于解决 —— 用真机调试.下面是步骤: 首先,检查一下真机连接需要的 SDK 是否安装,未安装,勾选进行安装 接着用 ...

  9. [51nod 1126] 求递推序列的第N项 - 矩阵乘法

    #include <bits/stdc++.h> using namespace std; #define int long long const int mod = 7; struct ...

  10. H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...