JCrop이 선택의 크기를 잘못된 값으로 변경합니다.

Question

JCrop을 사용하고 입력 필드로 너비와 높이를 설정하려고합니다.

높이 필드에 400 픽셀을 입력하면 Jcrop은 선택 영역의 크기를 279 픽셀로 조정합니다. 나는이 행동을 비판하지 않는다. http://jsfiddle.net/oxfep056/6/

HTML :

<form> 
    X: <input name="x" type="text" readonly /><br /> 
    Y: <input name="y" type="text" readyonly /><br /> 
    Width: <input name="w" type="text" onchange="updateSelection(); return false;" /><br /> 
    Height: <input name="h" type="text" onchange="updateSelection(); return false;" /> 
</form> 
<img src="http://dummyimage.com/1300x975/DDD/000.png" /> 

JS :

$(function() { 
    $('img').Jcrop({ 
     boxHeight: 800, 
     boxWidth: 800, 
     setSelect: [163, 122, 1138, 853], 
     onChange: addToForm, 
     onRelease: addToForm, 
     onSelect: addToForm 
    },function() { 
     jcrop_api = this; 
    }); 
}); 

function addToForm(Data) { 
    var x = Math.floor(Data.x); 
    var y = Math.floor(Data.y); 
    var w = Math.floor(Data.w); 
    var h = Math.floor(Data.h); 

    $('form input[name="x"]').val(x); 
    $('form input[name="y"]').val(y); 
    $('form input[name="w"]').val(w); 
    $('form input[name="h"]').val(h); 
} 

function updateSelection() { 
    var x = Math.floor($('form input[name="x"]').val()); 
    var y = Math.floor($('form input[name="y"]').val()); 
    var w = Math.floor($('form input[name="w"]').val()); 
    var h = Math.floor($('form input[name="h"]').val()); 

    jcrop_api.setSelect([x, y, w, h]); 
} 

이 어떤 문제가이 .. 입력 400 픽셀로

JSFiddle를 크기를 조정해야합니까?

Answer 1

저는 jCrop 사용자가 아니지만 설명서를 읽는 중 setSelect 메서드가 [x, y, w, h] 대신 [x, y, x2, y2]을 수신 할 것으로 예상됩니다.

올바른 계산을 사용하기 위해 updateSelection 메서드를 변경했습니다.

var x2 = w + x; 
var y2 = h + y; 

는 또한 Math.round에 방법 Math.floor을 변경, 그래서 계산은 jCrop 설정보다 실제 위치를 나타냅니다.

JSFiddle : http://jsfiddle.net/o0Lfuk1L/