2014年5月25日日曜日

Jcrop で選択を解除できないようにする

JavaScript で使用できる画像の範囲選択ライブラリ Jcrop で、
選択した領域を解除できないようにする方法です。
実際には解除された直後に範囲を再選択しています。
Jcrop は MIT ライセンスで使用可能です。動作には jQuery が必要です。

サンプルコードはこちら
デモはこちら

Jcrop では画像から範囲を選択した時に onSelect イベントが発生します。
選択された状態で画像の上を「クリック」すると選択状態が解除されて
onRelease イベントが発生します。
選択状態で再度ドラッグした場合は再選択となり、
onRelease が発生せずに直接次の onSelect が発生するので注意が必要です。

onSelect イベントが発生した時に、選択範囲を保存しておきます。
onRelease イベントが発生した時に選択範囲をすぐに setSelect() メソッドで、
再選択状態にすることで選択が解除されていないかのように見せることができます。
(実際には一瞬解除されます)

/**
 * Jcrop で選択範囲をキャンセルさせないテスト
 */
$(function() {
    var api = null,  // JcropAPI
        selected = null;  // 選択された範囲

    $('#jcrop-img').Jcrop({
        onSelect: function(area) {
            selected = area;
        },
        onRelease: function() {
            if(selected == null) {
                return;
            }
            api.setSelect([selected.x, selected.y, selected.x2, selected.y2]);
        }
    }, function() {
        api = this;
    });
});

※そもそも click イベント自体を受け付けないようにしてもできそうですが・・・。

0 件のコメント:

コメントを投稿