基於觸摸事件的旋轉元素

我正在尋找一些指導和/或示例來創建觸摸對象並旋轉它的方法。假設我們有一個圓圈的圖像，我希望能夠觸摸一個點，拖動這個圓圈並隨着手指的移動操縱它。基於觸摸事件的旋轉元素

我發現在旋轉很多教程：

我只需要獲得合併觸摸部分。

任何人之前做過這個或可以擺脫一些光？

2012-12-13 RooWM

你會想看看你的canvas實施MouseDown，MouseUp和MouseMove事件偵聽器，因爲「觸摸」與觸摸屏互動無非是看中了鼠標移動等等。

MouseDown和MouseUp是尋找如果用戶正在跨越canvas或不拖動有用。 MouseMove是您需要放置旋轉處理邏輯的地方。剩下的就是執行：

 
/* Borrowed from http://www.marceloduende.com/blog/?p=25 */ 
function addCrossBrowseEventListener(myElement, myEvent, myFunction) { 
    if(myElement.addEventListener){ 
     myElement.addEventListener(myEvent, myFunction, false); 
     return true; 
    } else { 
     myElement.attachEvent('on'+myEvent, myFunction); 
     return true; 
}

哪裏myElement是你的畫布的DOM元素，myEvent是添加了一個偵聽器的事件的名稱，myFunction是負責與邏輯函數的名稱事件。

或者，您可以使用jQuery來完成大部分工作，因爲它有許多更簡潔的事件處理方法。

來源

2012-12-13 16:36:38

謝謝賈斯汀 - 所有的都很有道理，不幸的是，我沒有足夠的經驗來讓這一切都能夠獨立完成。你知道我可能能夠逆向工程的任何例子嗎？謝謝 – RooWM

我不確定OP是否想要移動事件，他們說「touch」而不是「click」，所以我傾向於認爲這是針對觸摸屏設備的東西。在這種情況下，事件將是「touchstart」和「touchmove」 – Shmiddty

您可以簡單地將觸摸的旋轉映射到元素的transform: rotate(Ndeg) CSS。

並非所有支持觸摸的瀏覽器都能在event對象上提供rotate屬性，因此您可以用數學方法計算出該值。

document 
.getElementById("some-element") 
.addEventListener("touchmove", function(event) { 
    var rotation = event.rotation; 

    // This isn't a fun browser! 
    if (! rotation) { 
     rotation = Math.arctan2(event.touches[0].pageY - event.touches[1].pageY, 
       event.touches[0].pageX - event.touches[1].pageX) * 180/Math.PI; 
    } 

    // Take into account vendor prefixes, which I haven't done. 
    this.style.transform = "rotate(" + rotation + "deg)": 
});

您還需要保存先前的旋轉值並調整這一個基於關閉它，如果你希望用戶能夠將其旋轉不止一次。 :)

來源

2013-08-04 12:11:17 alex

基於觸摸事件的旋轉元素

回答

相關問題