자바 스크립트 스테이지 스케일 계산기

Question

나는 웹을 통해 누군가가 비슷한 필요성을 가지고 있을지도 모른다고 생각하면서도 광범위하게 조사했지만 부족 해 보였다. 너비와 높이 필드 (피트 단위)에 따라 드래그 가능한 객체의 무대 크기를 조정하는 계산기를 만들어야합니다.

쉽게 수정할 수 있도록 변수에 설정하는 것이 가장 좋은 최대 너비와 높이를 유지해야합니다. 이 최대 폭과 높이는 픽셀 단위로 설정됩니다. 스테이지에서 드래그 가능한 항목의 크기를 "데이터"속성으로 설정합니다. 나는 화면 해상도의 관점에서 일치 시키려고하지 않는다.

어떻게 접근하면 좋을까요? 저는 수학에있어서 평범하지 않습니다. 그리고 이것과 같은 객체와 컨테이너의 단계를 스케일링하는 데 필요한 함수를 만들 수 있다는면에서 부족합니다.

필자는 숙련 된 jQuery 사용자이므로 jQuery를 사용하면 의미가 있습니다. 미리 감사드립니다.

Answer 1

비례하여 상황을 조정하는 데는 최소한 두 가지 방법이 있습니다. 투영 된 (방의) 크기를 알 수 있고 크기 조정 된 치수 중 적어도 하나를 알아야하므로 (무대의 너비를 알고 있다고 가정하면) objectLengthInFeet/roomWidthInFeet * stageWidthInPixels에 비례하여 비율을 조정할 수 있습니다.

var stageWidth = 500, 
    roomWidth = parseFloat($('#width').val(), 10) || 0, // default to 0 if input is empty or not parseable to number 
    roomHeight = parseFloat($('#height').val(), 10) || 0, // default to 0 if input is empty or not parseable to number 
    setRoomDimensions = function (e) { 
     roomWidth = parseFloat($('#width').val(), 10); 
     roomHeight = parseFloat($('#height').val(), 10); 
    }, 
    feetToPixels = function feetToPixels(feet) { 
     var scaled = feet/roomWidth * stageWidth; 
     return scaled; 
    }; 

다음

데모입니다 : http://jsfiddle.net/uQDnY/