2012-11-29 3 views
1

저는 kineticjs lib를 정말 좋아하지만 kinetic 이미지 객체를 회전 할 때 리소스/예제를 찾기 위해 고심하고 있습니다.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 -class에서 rotateDeg 및 rotate -methods를 상속받습니다. rotateDeg는 찾고있는 도구입니다. rotate는 같지만도 대신 라디안을 사용합니다. 이것은 현재 회전을 기준으로 회전합니다.

또한 회전을 일부 절대 값으로 설정하는 setRotate 및 setRotateDeg -methods가 있습니다.

그래서이 시도 :

mainImage.rotateDeg(90); 

난이 도움이되기를 바랍니다!

+0

답장을 보내 주셔서 감사합니다. 이미지가 실제로 회전했지만 페이지에서 'touchImage.setOffset (mainImage.getWidth()/2, mainImage.getHeight()/2);' 이벤트는 오프셋을 중앙에두고 작업했습니다. 어쨌든 고맙습니다. –

+0

mainImage.setOffset (mainImage.getWidth()/2, mainImage.getHeight()/2); 이벤트를 시작하려면 생성시 오프셋을 지정하면 항상 중심을 중심으로 회전합니다. – Ani

+0

layer.draw()로 레이어를 다시 그려야합니다. 이러한 조작을 한 후에 –

관련 문제