iT邦幫忙

0

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

最近試著用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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

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

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

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

我要發表回答

立即登入回答