1

Jcrop の「setSelect」オプションを理解できません。jCrop Web サイトでは、例が次のようにリストされています。

setSelect:   [ 100, 100, 50, 50 ]

一般に彼らは次のように呼んでいます

setSelect:   [ x, y, x2, y2 ]

さて、数学的には、これは画像の左下隅と右上隅の座標を意味すると思います。つまり、(x,y) と (x2,y2) が座標です。しかし、彼らが示す例は、それぞれ右上隅と左下隅であることを示しているようです。それは奇妙に思えます。とにかく、「jCropped」になる写真の正確な寸法がわからない可能性があるため、setSelect 機能を一般化しようとしています。ここに私のコードがありますが、動作しません:

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

このコードを使用すると、何も選択されません。ただし、サンプルコードを使用すると、setSelect: [ 100, 100, 50, 50 ]機能します。しかし、トリミングされた写真の実際の寸法がわからないため、これを使用したくありません。コードが機能しないのはなぜですか?

4

1 に答える 1

2

このJcropのことを見てみました。Math.round()それらの値を計算するとき、いわば ed であることを期待しているように見えます。何をする必要があるかの核心を示す jsFiddle をまとめました。

また、ここにコードがあります->

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-14T05:28:53.433 に答える