2

次のjqueryプラグインhttp://flipbit.co.uk/jquery-image-annotation.htmlを使用して画像に注釈を付けたいのですが、[OK]ボタンをクリックする代わりに、ユーザーにドラッグして注釈を描画してもらいたいので、どうすればこれを実現できますか？何か案は？

4

1 に答える 1

1

プラグインは、プラグインのインスタンスを作成するとき、またはプラグインの編集ダイアログを介してのみ、メモを追加できるように見えます.

プラグインのフォークを作成しました: https://github.com/mccannf/jquery-image-annotateという追加のメソッドloadMoreを使用して、注釈付きの画像にプログラムでメモを追加できるようにします。

以下は、いくつかのサンプル li 要素を使用して注釈のドラッグを処理し、ドラッグ アンド ドロップを試すコードです。li 要素のテキストが注釈に追加されます。li 要素にクラスがあるeditable場合、注釈は編集可能です。

$(document).ready(function(){   

    // Used to set unique ids for each annotation
    var uniqueId = 100001;

    var annotatedImage = $("#trafalgar").annotateImage({
          editable: true,
          useAjax: false  
        });

    $("#label1").draggable({ revert: true, cursor: "crosshair" });
    $("#label2").draggable({ revert: true, cursor: "crosshair" });
    $("#label3").draggable({ revert: true, cursor: "crosshair" });
    $("#label4").draggable({ revert: true, cursor: "crosshair" });

    $(".image-annotate-view").droppable({
                    tolerance: "pointer",
                    hoverClass: "drop-hover",
                    drop: function(e, ui) {
                        alert("Dropped!");
                        var newPosX = ui.offset.left - $(this).offset().left;
        var newPosY = ui.offset.top - $(this).offset().top;
                        var note = createNote($(ui.draggable).text(), newPosY, newPosX, $(ui.draggable).hasClass("editable"));
                        $.fn.annotateImage.loadMore(annotatedImage, note);
            }
    });

    // Creates a note to be added to the image
    // Width and height are static, but could also be passed in as a configuration
    function createNote(noteText, dropTop, dropLeft, editFlag) {
        var thisNote = new Object();
        thisNote.id = (uniqueId++).toString();
        thisNote.text = noteText;
        thisNote.top = dropTop;
        thisNote.left = dropLeft;
        thisNote.width = 30;
        thisNote.height = 30;
        thisNote.editable = editFlag;
        return thisNote;
    }
});

これを実装する jsfiddle は次のとおりです: http://jsfiddle.net/mccannf/Tsrku/17/

于 2012-10-25T22:36:30.140 に答える