2015-06-22 40 views
1

我正在使用Jcrop插件来处理头像剪裁任务。我现在坚持要如何将选择框设置为固定框,具体取决于用户的偏好。在页面顶部有一个复选框,用户可以选择他们想要的固定选择框或用户可以调整大小的裁剪框。在Rails中使用JQuery Jcrop插件进行头像剪裁

$("#cropbox").Jcrop({ 
    onChange: showCoords, 
    onSelect: showCoords, 
    bgOpacity: .5, 
    aspectRatio: 1, 
    //minSize: [ 400, 400 ], 
    //maxSize: [ 400, 400 ], 
    setSelect: getDimensions(), 
    bgColor: 'black' 
}); 

通过同时设置“minSize属性”和“最大范围”设置为[400,400],我设法选择框设置为一个固定大小那里是没有办法让用户调整其大小。

<input type="checkbox" id="checkbox"/> Fixed to 400px <br /> 

接着,有一个复选框,其中用户可以选择它来确定选择框的大小,或取消选择它,以便用户可以调整选择框。

我不知道如何根据复选框的选择来修改“minSize”和“maxSize”。如何修改他们都为[0,0],使用户可以调整它的大小...

$('#checkbox').click(function(){ 
    if (this.checked) { 
    this.minSize = [400,400], 
    this.maxSize = [400,400], 
    } 
    else{ 
    this.minSize = [0,0], 
    this.maxSize = [0,0], 
    } 
}) 

回答

0

应将此设置您的jcrop元素。我们接受jcrop_api是您之前设置的元素:

var jcrop_api = $('#cropbox')。Jcrop({ ... });

然后检查您可以将设置发送到您的jcrop元素。

$('#checkbox').click(function(){ 
     if (this.checked) { 
     jcrop_api.setOptions({ 
      minSize = [400,400], 
      maxSize = [400,400], 
     }); 
     } 
     else{ 
     jcrop_api.setOptions({ 
      minSize = [0,0], 
      maxSize = [0,0], 
     }); 
     } 
    });