KineticJS 다른 이미지의 크기가 재조정 될 때 이미지의 위치 재 계산

Question

좋아, 이건 더 많은 질문이지만, 내가 개발 한 KineticJs 코드를 사용하고있다. 현재 나는 무대와 레이어를 가지고 있으며, 모든 것이 잘 정돈되어있다. 특정 그룹 크기가 조절되면 내가 다른 그룹의 위치를 ​​업데이트하는 기능을 사용하고는

.move ({x: (calculation), y: (calculation)}) 

방법을 사용하여 (물론 전경 .... 호출) (배경 호출 할 수 있습니다). 포 그라운드 자체의 위치를 ​​변경하여 크기 조정 후 백그라운드 내에서 위치가 변경되지 않은 것처럼 보이게하려고합니다. 즉, bg에 작은 원이 있고 전경을이 원에 배치하면 크기가 변경된 후 전경이 계속 원 안에 있어야합니다.

이

bgX = the background width before resize. 
bgXfinal = the background width after resize. 
bgY = the background height before resize. 
bgYfinal = the background height after resize. 
fgX = foreground position x (from topleft point) within the bg. 
fgY = foreground position y (from topleft point) within the bg. 

배경이 (다른 사람과 함께하지만, 이것은 주요 부분이다)이 수학 CALC를 통해 비례 적으로 크기를 조정 다음과 같이 내가 가진

변수 (숫자해야 문제가되지 그들이 대표 단지 무엇을)입니다 :

bgYfinal = bottomLeft.getY() - topLeft.getY(); 
bgXfinal = image.getWidth() * bgYfinal/image.getHeight(); 

내 .move()의 x 및 y 위치에 대한 좌표 계산이 필요합니다. 방법, 나는 그것을 이해할 수 없다. 이유는 무엇이든지 나를 넘어있다. 계산 결과는 축소 된 결과가 음의 x/y 조정을 제공하고 확대 된 결과가 양의 x/y 조정을 제공하기 때문에 이미지가 커지거나 작아 지든 상관없이 작동해야합니다.

현재 내가 가진 :

// bg size is increasing 
if (bgX < bgXfinal) { 
    group.move({ x: (bgXfinal - bgX), y: (bgYfinal - bgY) }); 
} 
// bg size is decreasing 
if (bgX > bgXfinal) { 
    group.move({ x: (bgXfinal - bgX), y: (bgYfinal - bgY) }); 
} 

명확하게 차이를 복용하고 위치에 추가부터 잘못

예상대로 전경 이동을하게하지만, 움직임이 너무 큽니다. 내가 2로 나누고 포 그라운드를 정확히 중앙에 놓으면 작동합니다. 그러나 당신의 수학에 정통한 이드가 배경이 증가/감소 할 때 포어 그라운드의 위치를 ​​결정하기위한 적절한 계산을 이해한다면 배경상의 어떤 위치에서도 작동해야합니다.

Answer 1

약간의 연구 끝에 괜찮 았음을 발견했습니다. 이러한 종류의 기능을 지원하는 KineticJs의 메소드입니다. setPosition(); 메서드는 포함 된 이미지의 크기 조정에서 제공된 계산을 기반으로 내부 이미지의 위치를 ​​다시 설정할 수 있습니다. heres는 수학 :

var x = innerGroup.getPosition().x, 
    y = innerGroup.getPosition().y, 
    newX = x/oldX * newWidth, 
    newY = y/oldY * newHeight; 

    innerGroup.setPosition({ x: newX, y: newY }); 

    innerLayer.draw(); 

크기를 조정 외측 그룹 새롭게 조정할 치수 변화에 비례한다 내부 그룹의 위치에 컨테이너 사이즈를 재 계산 코드 부로 것을 넣어.