相关疑难解决方法(0)

背景:我有一个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 …