가로 세로 비율로 JavaScript div 크기 조정

Question

저는 div를 이동하고 크기를 조정할 수있는 작은 스크립트를 작성하고 있습니다. 가로 세로 비율을 유지해야하며 논리가 작동하지 않습니다.

function resizing() { 
    var currentHeight = elmnt.offsetHeight; 
    var currentWidth = elmnt.offsetWidth; 
    var newHeight  = currentHeight + (event.pageY - currentY); 
    var newWidth  = currentWidth + (event.pageX - currentX); 
    var ratio   = currentWidth/currentHeight; 

    if(ratio < 1) { 
     newwidth = parseInt(newHeight * ratio); 
    } 
    else { 
     newheight = parseInt(newWidth/ratio); 
    } 

    elmnt.style.height = newHeight + "px"; 
    elmnt.style.width = newWidth + "px"; 

    currentY = event.pageY; 
    currentX = event.pageX; 
} 

스크립트 종류의 작품. 그러나 불행히도 종횡비를 완전히 수정하지는 않습니다. 때로는 가로 크기 만 조절하면 오래된 높이가 그대로 유지되고, 때로는 작동하지만 길이가 약간 떨어져서 크기가 조정됩니다.

다시 위아래로 크기를 조정할 때 길이가 점점 평등 해지고 올바른 사각형이면 모든 것이 올바르게됩니다.

혹시 문제를 해결할 수 있습니까? 내 잘못은 어디 있니?!

Answer 1

내가 날아가 수 : 여기

if (Math.abs(offsetx) > Math.abs(offsety)) { 
    ratio = currentHeight/currentWidth; 
    newHeight = currentHeight + (offsetx * ratio); 
    newWidth = currentWidth + offsetx;   
} else { 
    ratio = currentWidth/currentHeight; 
    newHeight = currentHeight + offsety; 
    newWidth = currentWidth + (offsety * ratio); 
} 

행동에 모든 일의 빠른 jsfiddle입니다 .

정말 고맙습니다.

내 문제는 먼저 어떤 축이 더 많은 변화가 있었는지를 추적해야한다는 것이 었습니다. 두 번째 문제는 내가 인식하지 못했던 것입니다. BIG 반올림 문제가 있습니다.

jQuery를 사용하여 CSS 크기를 설정하면 반올림됩니다. 그리고 나는 매회마다 비율 계산을위한 고도를 택했습니다.

즉 부정확성이 점점 악화되고 있음을 의미합니다. 이제 이것을 고려하여이 작업을 수행하는 방법을 알아 냈습니다 매우입니다.

지금은 직접 onclick을 이렇게 그냥 대신 요소에서 얻는으로 업데이트 :

currentHeight = $("#dragger").height(); 
currentWidth = $("#dragger").width(); 

그래서 덕분에 다시 도움을! 여기 내 최종 결과입니다 : http://jsfiddle.net/julian_weinert/xUAZ5/30/

Answer 2

귀하의 비율이 틀렸다고 생각합니다.

이전 너비를 사용하고 새 너비 또는 이전 높이/새 높이로 나누어 계산해야합니다.

var ratio = newWidth/currentWidth; 
newHeight = currentHeight * ratio; 

변경할 높이가 약 변경됩니다.

Answer 3

최소 눈금 (비율)을 가져야합니다. 아래 코드는 PHP 스크립트의 일부이지만 JS로 쉽게 번역됩니다. $iSrc = 소스 및 $iDest은 대상 MAX 너비/높이입니다.

귀하의 문제는 올바른 비율을 얻지 못한다는 것입니다. 비율을 정의하는 첫 번째 줄은 문제가 해결되는 곳입니다. 너비 또는 높이의 비율이 가장 낮습니다. 당신은 단지 폭/높이를하고 높이/폭을 잊어 버립니다. 이것이 수직 스케일링이 올바르지 않은 이유입니다.

$scale = min($iDestWidth/$iSrcWidth, $iDestHeight/$iSrcHeight); 

    if($scale >= 1){ 
     $iDestHeight = $iSrcHeight; 
     $iDestWidth = $iSrcWidth; 
    }else{   
     $iDestWidth = floor($scale*$iSrcWidth); 
     $iDestHeight = floor($scale*$iSrcHeight); 
    } 

Answer 4

다음 귀하의 경우 (비 < 1) 블록을 교체합니다. offsetx과 관련 offsety (event.pageX - currentX) 및 (event.pageY - currentY) : http://jsfiddle.net/8TWRV/이