자체 중심에서 이미지 회전 kineticJS

KineticJS를 사용하여 내 캔버스에 추가 된 이미지를 회전하려고합니다. 거의 작동했습니다. 회전 지점을 '이동'하기 위해 오프셋을 설정해야한다는 것을 알고 있습니다. 그 부분이 작동하고 있습니다. 그러나 오프셋의 해당 위치로 이동 중입니다. 회전을 한 후에 이미지를 캔버스의 다른 위치로 드래그하여 자체 중심을 중심으로 계속 회전 할 수 있습니다. 레이어에 여러 이미지가 있기 때문에 전체 캔버스를 회전하고 싶지 않습니다.자체 중심에서 이미지 회전 kineticJS

관련 코드 :

function rotateLayer() { 
    // Rotate bird image 
    var rotation = 15; 

    // Set rotation point: 
    imageDict[1].setOffsetX(imageDict[1].width()/2); 
    imageDict[1].setOffsetY(imageDict[1].height()/2); 

    // rotation in degrees 
    imageDict[1].rotate(rotation); 
    imageDict[1].getLayer().draw(); 
}

워킹 데모 jsfiddle에 : http://jsfiddle.net/kp61vcfg/1/이

그래서 한마디로 내가 회전하지만 운동을 할 수 있습니다.

출처

2014-10-13 Paul Meems

이동하지 않고 어떻게 회전 하시겠습니까?KineticJS는 "시작점"과 관련된 객체를 회전시킵니다. 예를 들어 Kinetic.Rect의 시작점은 {0, 0} - 왼쪽 상단입니다. 이러한 "시작점"을 오프셋 매개 변수가있는 위치로 이동할 수 있습니다.

출처

2014-10-14 14:24:36 lavrton

답장을 보내 주셔서 감사합니다. 내 눈을 봤어? 이 데모에서는 버튼을 사용하여 회전합니다. 내 전체 애플 리케이션에서 나는 회전을 할 슬라이더를 사용합니다. 회전이 정상적으로 작동합니다 처음으로 이미지가 캔버스의 다른 위치로 이동하는 것을 원하지 않습니다. 이미지의 현재 위치를 얻으려고했기 때문에 다시 움직일 수는 있지만 찾을 수는 없습니다. –

많은 흔적과 오류가 발생한 후 해결책을 찾았습니다.

function initAddImage(imgId, imgwidth, imgheight) { 
    var imageObj = new Image(); 
    imageObj.src = document.getElementById(imgId).src; 
    imageObj.onload = function() { 
     var image = new Kinetic.Image({ 
      image: imageObj, 
      draggable: true, 
      shadowColor: '#787878', 
      shadowOffsetX: 2, 
      shadowOffsetY: 2, 
      width: imgwidth, 
      height: imgheight, 
      x: 150, // half width of container 
      y: 150, // half height of container 
      offset : {x : imgwidth/2, y : imgheight/2}, // Rotation point 
      imgId: imgId 
     }); 

     layer.add(image); 
     //image.cache(); 
     layer.draw(); 
     imageDict[currentLayerHandle] = image; 
     currentLayerHandle++; 
    }; 
}

나는 업데이트했습니다

트릭은 이미지의 중앙 회전 지점을 설정 절반 너비와 높이에로드하는 동안 오프셋 및 image.cache를 호출하지 않는 설정하는 것입니다 내 데모에서 작동 버전 :

출처

2014-10-16 19:02:21

자체 중심에서 이미지 회전 kineticJS

답변

관련 문제