html5获得画布上坐标,javascript – HTML5画布在缩放和翻译后获取坐标

背景：我有一个

HTML5画布,我画了一个图像.现在,当图像首次加载时,它以100％的比例加载.图像是5000 x 5000.画布大小是600 x 600.所以onload,我只看到前600 x像素和600 y像素.我可以选择在画布上缩放和翻译图像.

我的问题：我试图找出一种算法,该算法在考虑缩放和平移的同时,返回鼠标点击相对于图像的像素坐标,而不是画布.

我知道已经有很多话题,但我见过的都没有用.我的问题是当我有多个翻译和缩放时.我可以缩放一次并获得正确的坐标,然后我可以再缩放并获得正确的坐标,但是一旦我缩放或缩放多次,坐标就会关闭.

这是我到目前为止所拥有的.

//get pixel coordinates from canvas mousePos.x, mousePos.y

(mousePos.x - x_translation)/scale //same for mousePos.y

annotationCanvas.addEventListener('mouseup',function(evt){

dragStart = null;

if (!dragged) {

var mousePos = getMousePos(canvas, evt);

var message1 = " mouse x: " + (mousePos.x) + ' ' + "mouse y: " + (mousePos.y);

var message = " x: " + ((mousePos.x + accX)/currentZoom*currentZoom) + ' ' + "y: " + ((mousePos.y + accY)/currentZoom);

console.log(message);

console.log(message1);

console.log("zoomAcc = " + zoomAcc);

console.log("currentZoom = " + currentZoom);

ctx.fillStyle="#FF0000";

ctx.fillRect((mousePos.x + accX)/currentZoom, (mousePos.y + accY)/currentZoom, -5, -5);

}

},true);

//accX and accY are the cumulative shift for x and y respectively, and xShift and xShift yShift are the incremental shifts of x and y respectively

其中当前缩放是累积缩放.和zoomAcc是此时缩放的单次迭代.所以在这种情况下,当我放大时,zoomAcc始终为1.1,而currentZoom = currentZoom * zoomAcc.

为什么这是错的？如果有人可以告诉我如何跟踪这些转换,然后将它们应用到mousePos.x和mousePos.y我将不胜感激.

谢谢

更新：

在图像中,绿点是我点击的地方,红点是我使用markE的方法计算该点的计算的地方. m值是markE方法中的矩阵值.

html5获得画布上坐标,javascript – HTML5画布在缩放和翻译后获取坐标相关推荐

html5 txt文件上传,JavaScript html5利用FileReader实现上传功能
本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分文件上传演练 Browse... 2. JS部分 var result = docum ...
html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
html5地图图片拖拽,javascript html5 canvas实现可拖动省份的中国地图
本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所 ...
html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
按键精灵通过句柄获取窗口坐标_大漠插件后台找图、自动获取坐标窗口句柄鼠标多点左单击脚本...
大漠插件后台找图.自动获取坐标窗口句柄鼠标多点左单击脚本一.准备工作第一步:下载大漠插件.解压,运行"注册大漠插件到系统.bat",把全部东东都复制到按键精灵的plugin目 ...
html5 闪光,人脸检测的JavaScript / HTML5 /闪光[关闭](Face detection jav
你有几个可能性,在这里,这取决于这是你要用于执行目标语言. 可能性之一是闪存,在那里你可以使用移植到大冢正和人脸检测库AS3最初实施OpenCV . http://www.libspark.org/w ...
html5背景图片上放按钮,html5自定义video标签的海报与播放按钮
文章目录一.问题 1.默认播放按键不好看 2.设置自定义封面图二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮三.步骤分解 1.海报图片作为div的背景 2. ...
html5实现在线动态画板,Javascript HTML5 Canvas实现的一个画板
DEMO6:自定义画板浏览器不支持canvas YELLOW RED BLUE GREEN WHITE BLACK 4PX 8PX 16PX EXPORT var canvas = document ...
百度地图拖动标注后获取坐标
本来想用图吧的API来做的,结果弄了下,在手机上弄不了.换用百度地图了..本功能个人觉得在很多地方用到,先记下来,省得每次都得翻地图API文档一点一点弄. 功能表现为: 地图一开始打开就定位到你的附近 ...

html5获得画布上坐标,javascript – HTML5画布在缩放和翻译后获取坐标

html5获得画布上坐标,javascript – HTML5画布在缩放和翻译后获取坐标相关推荐

最新文章

热门文章