KineticJS : 앵커를 사용하여 오프셋 및 회전 정의하기

Question

저는 KineticJS를 처음 접했고 별도의 앵커를 사용하여 정의 된 중심점을 중심으로 이미지를 회전하고 이미지화하기 위해 앵커를 사용하려고합니다.

나는 회전이 작동하고 회전 중심도 정의됩니다. 그러나 사용자가 앵커를 드래그하여 회전 중심을 정의하면 setOffset() 함수를 사용하면 이미지가 앵커 대신 이동합니다.

사용자가 앵커를 드래그하고 앵커가 움직일 수있는 방법이 있는지 궁금 해서요. 앵커를 드래그하고 이미지가 움직이는 대신 사용자가 오프셋을 설정합니까? 나는 또한 드래그하면 크기 조정에 sthe에게 회전 중심을 이미지의 네 모서리를 업데이트하기 위해 노력하고있어

function update(group, activeAnchor) { 
var topLeft = group.get(".topLeft")[0]; 
var topRight = group.get(".topRight")[0]; 
var bottomRight = group.get(".bottomRight")[0]; 
var bottomLeft = group.get(".bottomLeft")[0]; 
var centre = group.get(".centre")[0]; 
var image = group.get(".image")[0]; 

var anchorX = activeAnchor.getX(); 
var anchorY = activeAnchor.getY(); 

var centreX = group.getOffsetX(); 
var centreY = group.getOffsetY(); 

var width = group.getWidth(); 
var height = group.getHeight(); 
// update anchor positions 
switch (activeAnchor.getName()) { 
    case 'topLeft': 
      topRight.setY(anchorY); 
      bottomLeft.setX(anchorX); 
      centreX = topLeft.getX()/2; 
      centreY = topLeft.getY()/2; 
      break; 

    case 'topRight': 
      topLeft.setY(anchorY); 
      bottomRight.setX(anchorX); 
      centreX = topRight.getX()/2; 
      centreY = topRight.getY()/2; 
      break; 

    case 'bottomRight': 
      bottomLeft.setY(anchorY); 
      topRight.setX(anchorX); 
      break; 

    case 'bottomLeft': 
      bottomRight.setY(anchorY); 
      topLeft.setX(anchorX); 

      centre.setX(centreX); 
      centre.setY(centreY); 
      break; 

    case "centre": 
      var absolute = group.getPosition(); 
      group.setOffset(anchorX, anchorY); 
      group.setPosition(absolute); 
    } 

image.setPosition(topLeft.attrs.x, topLeft.attrs.y); 

var width = topRight.attrs.x - topLeft.attrs.x; 
var height = bottomLeft.attrs.y - topLeft.attrs.y; 
if(width && height) { 
    image.setSize(width, height); 
} 
} 

을 다음과 같이

업데이트 기능입니다. 어떤 생각을 어떻게 할 것인가?

미리 감사드립니다.

UPDATE

바이올린 : http://jsfiddle.net/njPdr/은 (는 제대로 여기에 작동하지 않을 수 있습니다하지만 당신은 내가 여기서 뭘하려고하고 무엇을 볼 수 있습니다) 당신이 이미지의 위치를 ​​설정하는

Answer 1

: image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

을 image.setOffset(youroffsetx, youroffsety);으로 대체하면 더 이상 이미지가 움직이지 않으므로 원하는대로 오프셋을 설정합니다. 두 번째 질문에 대해서는 오프셋이 회전 중심이라는 것을 기억하십시오. 주석에 설명 된대로

편집 :

case "centre": 
      var absolute = group.getPosition(); 
      group.setOffset(anchorX, anchorY); 
      group.setPosition({x:absolute.x + group.getOffsetX(), y:absolute.y + group.getOffsetY()}); 
    }