在svg文间画图过程中放大缩小图片后,坐标偏移问题
//鼠标坐标:在SVG经过缩放、偏移、ViewBox转换后,鼠标坐标值
var mouseCoord = {
x : .,
y : .
};
//用户坐标:相对于原始SVG,坐标位置
var userCoord = {
x : .,
y : .
};
var cRadius = .; //半径 var svgDocument = null;
var svgRoot = null; //获取鼠标事件相关的SVG Document
function getSVGDocument(evt)
{
var target = evt.target;
var parent = target.parentNode;
svgDocument = parent.getOwnerDocument();
svgRoot = svgDocument.documentElement;
} //计算坐标位置:包括用户坐标、鼠标坐标
function getCoords(evt)
{
var x_trans = .; //X偏移
var y_trans = .; //Y偏移
var x_scale = .; //ViewBox导致的X缩放比例
var y_scale = .; //ViewBox导致的Y缩放比例
var scale = .; //缩放比例
var trans = null;
var viewbox = null; getSVGDocument(evt); scale = svgRoot.currentScale; //获取当前缩放比例
trans = svgRoot.currentTranslate; //获取当前偏移
//获取SVG的当前viewBox
viewbox = svgRoot.getAttributeNS(null, "viewBox"); //获取ViewBox属性 //获取用户坐标:原始SVG的坐标位置
userCoord.x = evt.getClientX();
userCoord.y = evt.getClientY(); //计算偏移、缩放等
x_trans = ( 0.0 - trans.x ) / scale;
y_trans = ( 0.0 - trans.y ) / scale;
// Now that we have moved the rectangle's corner to the
// upper-left position, let's scale the rectangle to fit
// the current view. X and Y scales are maintained seperately
// to handle possible anamorphic scaling from the viewBox
zoom = scale;
x_scale = 1.0 / scale;
y_scale = 1.0 / scale;
if ( viewbox ) {
// We have a viewBox so, update our translation and scale
// to take the viewBox into account
// Break the viewBox parameters into an array to make life easier
var params = viewbox.split(//s+/);
// Determine the scaling from the viewBox
// Note that these calculations assume that the outermost
// SVG element has height and width attributes set to 100%.
var h_scale = 1.0 / parseFloat(params[]) * window.innerWidth;
var v_scale = 1.0 / parseFloat(params[]) * window.innerHeight;
// Update our previously calculated transform
x_trans = x_trans / h_scale + parseFloat(params[]);
y_trans = y_trans / v_scale + parseFloat(params[]);
x_scale = x_scale / h_scale;
y_scale = y_scale / v_scale;
}
//根据用户坐标、偏移量、缩放等计算鼠标坐标
mouseCoord.x = userCoord.x * x_scale + x_trans;
mouseCoord.y = userCoord.y * y_scale + y_trans;
}
在svg文间画图过程中放大缩小图片后,坐标偏移问题的更多相关文章
- 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览
### 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览 http://segmentfault.com/a/1190000002583569
- SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现
SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现 如下STO,是从公司代码SZSP转入CSAS, 如下图示的内向交货单180018660.该内向交货单是在外向交货单8001632 ...
- 016 Android 图片选择器(在选中和未选中的过程中,切换展示图片)
1.目标效果 在选中和未选中的过程中,切换展示图片 2.实现方法 (1)在app--->res--->drawable 右击drawable文件夹右键,new ---->drawab ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- Android 手势滑动,多点触摸放大缩小图片
效果展示: 基本思路: <1>首先写一个图片控制类ImageControl,实现对图片控制的的基本操作,我们的图片控制类ImageControl是继承自ImageView自定义的视图: & ...
- Android多点触摸放大缩小图片
1.Activity package com.fit.touchimage; import android.app.Activity; import android.graphics.Bitmap; ...
- ios 双指捏合放大缩小图片的例子
图片跟随双指捏合的距离放大或者缩小. 利用-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 实现. touchesMov ...
- svg查看预览 , 鼠标控制放大缩小 , 托拉拽等
自己写是不可能了 , 所以要借用插件 svg-panzoom.js 地址 : https://github.com/ariutta/svg-pan-zoom#demos 及常见问题https://ww ...
- 关于asp.net中cookie在调试过程中读写正常发布后乱码问题
最近在做的项目发布后出现了乱码的问题,既然出现了乱码很大的可能性是跟编码有关系,所以首先的解决方案就是重新对cookie进行编码, 在写入的cookie的时候编码,在读取的时候解码 在写入cookie ...
随机推荐
- linux环境下的时间编程
Linux下提供了丰富的api以供开发者们处理和时间相关的问题.然而这些接口看似各自为政实则有有着千丝万缕的联系,在学习和时间中引发了各种各样的混乱.因此时间处理成为了许多Linux开发者的梦魇,遇到 ...
- thinkPHP渗透之经验决定成败
如上图,目标就一个登陆框,最近 Thinkphp 程序很多,根据后台地址结构,猜测可能是 ThinkPHP ,随手输入 xxx 得到 thinkPHP 报错页面,确定目标程序和版本. 然后上 5.X ...
- 采用C++实现哈夫曼树的创建并输出哈夫曼编码
一.这篇随笔来自一道信息论的作业题,因为手动编码过于复杂,所以想到了编程解决,原题目如下图所示: 二.源代码如下: #include <iostream> #include <str ...
- 单片机的 HexToStr HexToBcd BcdToStr 几个转换函数
今天写单片机一个程序 要检查一些数据,想发到串口调试的软件上在电脑上查看 有些转换函数 想网上找一个 看看都是很多的垃圾文章 很多的程序都不能用,那些发文章的人也不用心 所以我还是自己动手写一下吧 写 ...
- Mybatis三剑客介绍
1.MyBatis generator 利用mybatis-generator自动生成代码 下载地址: https://download.csdn.net/download/qq_36625806/ ...
- UVa 11059 最大乘积 java 暴力破解
题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...
- TensorFlow系列专题(八):七步带你实现RNN循环神经网络小示例
欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! [前言]:在前面的内容里,我们已经学习了循环神经网络的基本结构和运算过程,这一小节 ...
- jsp学习笔记day1
一.jsp简介 JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ...
- [vijos]1051送给圣诞夜的极光<BFS>
送给圣诞夜的极光 题目链接:https://www.vijos.org/p/1051 这是一道很水很水的宽搜水题,我主要是觉得自己在搜素这一块有点生疏于是随便找了一题练手,找到这么一道水题,原本以为可 ...
- 关于C#三层架构增删改查中的“登录”问题
先来一个界面: DAO中的方法: 实现代码如下: 这里需要特别注意的是一个“安全性”的考虑: 当登入成功时,把登入时输入的用户名赋值到Session,然后在后面的页面进行判断--此时Session保留 ...