求問 IT 大神求出正確的角度向量(已解決)

javascript hammer

居然解出來了 2019-05-24 17:06:02 ‧ 1609 瀏覽

分享至

最近試著用Hammer.js設計出可旋轉+移動+放大+雙擊的移動圖片網頁
目前作品網址: https://codepen.io/partyyaya/pen/KLoWJJ
(需用手機操作)

於pinchmove(雙指移動)裡面有一段程式如下:
變數解釋:
currentAngle:目前圖片旋轉角度
pinchDelta.x,pinchDelta.y:圖片移動向量

oImg.style.webkitTransform = 
"scale("+imageSize*e.scale+") "
+"rotate("+currentAngle+"deg) "
+"translate("+(pinchDelta.x)+"px,"+(pinchDelta.y)+"px)";

問題:
向量移動時卻以圖片的角度而移動而非正確方向(90度與180度最明顯)
請問如何得到正確的x,y的向量填入translate?
或有任何其他方法可保有UX往正確方向移動?

找出問題:
oImg.style.left & top
需在 oImg.style.webkitTransform 前面
translate 只能依物件的角度視角去移動

感謝各位大神幫助

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

小魚

iT邦大師 1 級 ‧ 2019-05-24 17:50:59

不知道是不是類似Android程式繪圖,
他是直接轉動整個畫面,
所以如果有位移的話會整個跑掉,
所以要先轉動再放大再移動...
(轉動跟放大應該可以交換)

回應 1
分享
檢舉

居然解出來了 iT邦好手 1 級 ‧ 2019-05-27 09:55:11 檢舉

感謝解決了,單純只是webkitTransform的問題

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22199 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙