2012-11-29 449 views
1

我真的很喜歡kineticjs庫,但我正在努力尋找旋轉動態圖像對象的任何資源/示例。Kineticjs - 順時針旋轉圖像90度

我看過很多關於旋轉形狀的東西,但是從看起來看起來都像是旋轉整個畫布而不是圖像對象。

這是真的嗎?如果沒有,請指出任何文件嗎?

關於

p.s.

,誰想要的代碼,這只是標準圖像deleration:

mainImage = new Kinetic.Image({ 
    image: imageObj, 
    x: 0, 
    y: 0, 
    draggable: true, 
    startScale: 1 
}); 

,並嘗試:

function rotateLeft(){ 
    $('#rotate-left').bind($bind, function(){ 
     mainImage.rotate(90); 
     layer.draw(); 
    }); 
} 

這使得圖像消失...

問候

回答

5

Kinetic.Image從Kinetic.Node類繼承rotateDeg和rotate -methods。 rotateDeg是你正在尋找的人。旋轉是相同的,但使用弧度而不是度數。 這些將相對於當前旋轉進行旋轉。

還有setRotate和setRotateDeg方法,它們會將旋轉設置爲某個絕對值。

那麼試試這個:

mainImage.rotateDeg(90); 

我希望這有助於!

+0

感謝您的回覆,我發現圖片實際上正在旋轉,但離開頁面,使用'mainImage.setOffset(mainImage.getWidth()/ 2,mainImage.getHeight()/ 2);'綁定到touchstart事件保持偏移居中並工作。無論如何謝謝你 –

+0

你不必綁定mainImage.setOffset(mainImage.getWidth()/ 2,mainImage.getHeight()/ 2);對於touchstart事件,只需在創建時指定偏移量,它將始終圍繞中心旋轉。 – Ani

+0

不要忘記用layer.draw()重繪圖層。做完這些操作之後。 –