2

我想使用以下 jquery 插件http://flipbit.co.uk/jquery-image-annotation.html对图像进行注释，但我希望用户拖动并绘制注释而不是单击确定按钮，那么我该如何实现这一点? 有任何想法吗？

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 回答