javascript - jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片縮放、旋轉(zhuǎn)功能,但是旋轉(zhuǎn)后再縮放就出問(wèn)題了
問(wèn)題描述
用jquery制作的,圖片外面包裹一個(gè)和圖片等大的p盒子#wrapp,實(shí)現(xiàn)原理是這樣的,拿右下角的小圓點(diǎn)為例: 鼠標(biāo)點(diǎn)下小圓點(diǎn)時(shí)記錄當(dāng)前鼠標(biāo)的pageX和pageY的值,盒子#wrapp的寬高以及l(fā)eft和top值。通過(guò)移動(dòng)時(shí)鼠標(biāo)的pageX減去起初記錄的pageX值計(jì)算水平方向鼠標(biāo)移動(dòng)的距離,從而給盒子添加該距離作為寬度的增長(zhǎng)值,代碼如下
$(document).on('mousedown','#resize_rb',function(event){activeWrapp = $(event.target).parent('#wrapp');eX = event.pageX;eY = event.pageY;eW = activeWrapp.width();eH = activeWrapp.height();wrappX = parseInt(activeWrapp.css('left'));wrappY = parseInt(activeWrapp.css('top'));rbMove = true;return false; }) $(document).on('mousemove',function(event){if(rbMove){ var x = event.pageX - eX; var y = event.pageY - eY; activeWrapp.css({'width':eW + x + 'px','height':eH + y + 'px'}); setResizeToolPositionAndSize($(’#resize_rb’));} }
這種方式實(shí)現(xiàn)的縮放在盒子旋轉(zhuǎn)之后(即transform:rotate()屬性不為0)再進(jìn)行縮放就亂了,有沒(méi)有辦法在此基礎(chǔ)上坐點(diǎn)修改比如利用旋轉(zhuǎn)角度計(jì)算應(yīng)該修改的尺寸?大神給說(shuō)下思路就好 。(如果有這種好用的插件也希望可以推薦以下)
問(wèn)題解答
回答1:鼠標(biāo)移動(dòng)的x和y值除以cos旋轉(zhuǎn)角度,應(yīng)該就是你應(yīng)該改變的元素寬高。(不太對(duì),我改一改)
