如何爲Jcrop'setSelect'選項指定自定義值？

我無法理解Jcrop的「setSelect」選項。在jCrop網站也列出了一個例子作爲如何爲Jcrop'setSelect'選項指定自定義值？

setSelect: [ 100, 100, 50, 50 ]

這在一般他們稱之爲

setSelect: [ x, y, x2, y2 ]

現在，數學，我想這意味着左下角的座標，以及右上角的形象。也就是說，（x，y）和（x2，y2）是座標。但他們給出的例子似乎表明它分別是右上角和左下角。這似乎很奇怪。無論如何，我想推廣setSelect功能，因爲我可能不知道將被'jCropped'的照片的確切尺寸。這是我的代碼，但它不起作用：

setSelect: [ $('#cropbox').width()/4, 
       $('#cropbox').height()/4, 
       ($('#cropbox').width()/4)*3, 
       ($('#cropbox').height()/4)*3]

當我使用此代碼時沒有被選中。但是，當我使用示例代碼setSelect: [ 100, 100, 50, 50 ]時，它可以工作。但我不想使用這個，因爲我不知道裁剪照片的實際尺寸。爲什麼我的代碼不工作？

來源

2012-07-14 Ajay Mohite

我看了看這個Jcrop的東西。看起來當它計算這些值時，可以這麼說，它期望它們是Math.round() ed。 I've put together a jsFiddle showing the core of what needs to be done。

而且，這裏的代碼 - >

jQuery的 - >

var jcrop_api; 
jcrop_api = $.Jcrop('#cropbox'); 
function getDimensions(){ 
    return [ 
    Math.round($('#cropbox').width()/2), 
    Math.round($('#cropbox').height()/2), 
    Math.round($('#cropbox').width()/ 4), 
    Math.round($('#cropbox').height()/4) 
    ]; 
} 
$(function(){ 
    $('#setSelect').click(function(){ 
    jcrop_api.setSelect(getDimensions()); 
    });  
});

HTML結構 - >

<div id="cropbox"> 
    <img src="http://media.giantbomb.com/uploads/2/27962/1867070-illionois_state_bird_and_flower.jpg" />  
</div><br/> 
<button id="setSelect"> Set Select </button>

確保您有相關的JS和這個插件的CSS文件，所有應該開箱即用。

來源

2012-07-14 05:28:53 Ohgodwhy

如何爲Jcrop'setSelect'選項指定自定義值？

回答

相關問題