Kinetic JS - 이미지의 크기를 조정할 때의 문제점

Question

방금 ​​Kinetic JS를 사용하기 시작했습니다. 이 링크를 보면

는 : Example

코드의 일부는 여기에 있습니다 : 코드의

function update(group, activeHandle) { 
    var topLeft = group.get(".topLeft")[0], 
     topRight = group.get(".topRight")[0], 
     bottomRight = group.get(".bottomRight")[0], 
     bottomLeft = group.get(".bottomLeft")[0], 
     image = group.get(".image")[0], 
     activeHandleName = activeHandle.getName(), 
     newWidth, 
     newHeight, 
     imageX, 
     imageY; 

    // Update the positions of handles during drag. 
    // This needs to happen so the dimension calculation can use the 
    // handle positions to determine the new width/height. 
    switch (activeHandleName) { 
     case "topLeft": 
      topRight.setY(activeHandle.getY()); 
      bottomLeft.setX(activeHandle.getX()); 
      break; 
     case "topRight": 
      topLeft.setY(activeHandle.getY()); 
      bottomRight.setX(activeHandle.getX()); 
      break; 
     case "bottomRight": 
      bottomLeft.setY(activeHandle.getY()); 
      topRight.setX(activeHandle.getX()); 
      break; 
     case "bottomLeft": 
      bottomRight.setY(activeHandle.getY()); 
      topLeft.setX(activeHandle.getX()); 
      break; 
    } 

나머지는 jsdFiddle 링크입니다. 나는 무언가를 분명히 놓친 것 같습니다!

앵커로 둘러싸인 2 개의 이미지가 보입니다. 크기가 조정되거나 드래그 될 때 이미지가 검은 색 사각형 (예 : 경계)을 지나서는 안됩니다. 이미지가 이전에 크기가 조정되지 않은 경우 드래그가 작동합니다.

크기가 조정 된 이미지는 여전히 경계를 통과합니다. 크기가 조정 된 이미지를 드래그 앤 드롭하면 때로는 보이지 않는 경계가 생기기 쉽습니다 (이미지의 크기를 조절하는 사람이 오른쪽 하단 앵커를 사용하여 크기를 조정하지 않는 경우).

아무도 내가 잘못 한 것을 볼 수 있습니까?

많은 도움을 주셔서 감사합니다.

Answer 1

당신이 겪고있는 문제는 당신이 앵커를 당겨 이미지 크기를 조정하는 경우,이 같은 이미지의 위치를 ​​설정하는 것입니다 다음에 상대적으로 이미지 위치가 업데이트되는

if(activeHandleName === "topRight" || activeHandleName === "bottomRight") { 
    image.setPosition(topLeft.getX(), topLeft.getY()); 
} else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") { 
    image.setPosition(topRight.getX() - newWidth, topRight.getY()); 
} 

을 (그룹)이지만 그룹은 dragBoundFunc 집합을 가진 그룹입니다. 이것은 "보이지 않는 경계"이론을 설명합니다. 이미지가 그룹 내에서 위치가 조정되고 크기가 조정되지만 그룹 위치는 정적으로 유지됩니다. 그룹을 끌면 경계가 새 이미지 크기와 일치하지 않습니다.

이렇게 위치를 업데이트해야하는 이유가 있습니까? 위의 줄에 주석을 달고 크기 조정 후 끌기 문제를 수정했습니다. 이제 이미지의 크기를 조정할 수 있고 끌기 경계가 그대로 유지됩니다. 최소한 이 필요한 경우 group.setPosition을 대신 사용해야하고 image.setPosition(0,0);을 사용하여 하나의 위치 만 처리하면됩니다 (이미지가 왼쪽 상단의 0,0에있는 그룹 위치에 고정되어 있음).

이미지가 너비 또는 음수 값이 음수가 될 수 없다는 것을 알았습니다. 당신은 수행하여이 문제를 해결할 수 있습니다

image.setSize(Math.abs(newWidth), Math.abs(newHeight));

을 추가, 당신은 당신의 이미지에 대한 음의 값을 가질 수 없기 때문에, 당신은 부정적인 너무 서로 과거 이동에서 앵커를 제한 할 수 있습니다.당신은 몇 가지 간단한 좌표 검출 로직을 수행하여이 작업을 수행 할 수 있습니다

if(topRight.getX() < topLeft.getX()+10) { 
    topRight.setX(topLeft.getX()+10); 
} 
if(bottomRight.getX() < topLeft.getX()+10) { 
    bottomRight.setX(topLeft.getX()+10); 
} 
if(bottomRight.getY() < topLeft.getY()+10) { 
    bottomRight.setY(topLeft.getY()+10); 
} 
if(bottomLeft.getY() < topLeft.getY()+10) { 
    bottomLeft.setY(topLeft.getY()+10); 
} 

을 마지막 문제의 경우 : 이미지 크기를 조정하는 경계를지나, 난 당신이 단순히 앵커 유사한 dragBoundFunc를 추가 할 수 있다고 생각해서는 안된다. 또는이 단락 바로 위의 논리를 조정하는 방법과 비슷한 작업을 수행 할 수도 있습니다. 나는 dragBoundFunc 메서드가 더 깨끗하게 될 것이라고 생각한다.

앵커 용으로 dragBoundFunc을 구현하지 않았지만 여기에 업데이트 된 바이올린이 있습니다. 잘하면 알아낼 수 있습니다!

http://jsfiddle.net/projeqht/aBkYb/

Answer 2

dragBoundFunc의 "pos"는 이미지가 아닌 그룹의 왼쪽 상단입니다.

이미지의 크기를 조정할 때 그룹의 크기를 조정하지 않으므로 "위치"는 항상 이미지가 아닌 원래 크기와 그룹의 상대적 위치를 나타냅니다.

이렇게하면 drawBoundFunc 계산이 취소됩니다.