javascript - 關于trasform后的坐標計算的問題

問題描述

我在做了一個圖片在父容器內拖動的功能后，將父容器用transform變化了一下，旋轉啊拉伸啊什么的，之后坐標的計算就開始紊亂了，我想問一下如果想讓他正常工作的話應該怎么做？拖動的代碼如下：$(function(){

var dragging = false;var iX, iY;var qX, qY;var tempid; $('.dragcontain').mousedown(function(e) { dragging = true; iX = accSub(e.clientX,this.offsetLeft); iY = accSub(e.clientY,this.offsetTop); qX = $(e.target).children().position().left; qY = $(e.target).children().position().top; console.log(qX,qY); console.log(iX,iY); this.setCapture && this.setCapture(); return false;});document.onmousemove = function(e) { if (dragging) { var e = e || window.event; console.log('sX:',e.clientX,'sY:',e.clientY); var nX = accSub(e.clientX,e.target.offsetLeft); var nY = accSub(e.clientY,e.target.offsetTop); console.log(e.clientX,e.target.offsetLeft) var mX = accSub(nX,iX); var mY = accSub(nY,iY); var oX = accAdd(qX,mX); var oY = accAdd(qY,mY); $(e.target).children().css({'left':oX + 'px', 'top':oY + 'px'}); console.log('iX:',iX,'iY:',iY); console.log('oX:',oX,'oY:',oY); console.log('nX:',nX,'nY:',nY); console.log('mX:',mX,'mY:',mY); console.log('qX:',qX,'qY:',qY); console.log(''); return false; }};$(document).mouseup(function(e) { dragging = false; e.cancelBubble = true; iX=0; iY=0;})

})

光光是將dragcontain給rotate（45deg）旋轉后就開始亂了，坐標直接到-1000多去了

問題解答

transform旋轉縮放都是有基點的，transform-origin