为什么将光标拖动一次后不可拖动?

时间:2020-02-19 15:42:03

标签: javascript jquery image

我用Jquery做一个项目,必须在图像上拖动光标。每个光标都链接到一个注释。因此该项目是在光标的帮助下对图像进行精确注释。 here is an exemple, cursor in blue and when we click on it, we can enter a comment

关闭评论对话框时,可以拖动光标以使其更精确地移动。 问题:当我拖动它时,它可以工作,但是我不能再拖动它一次,而且我不明白为什么,您能帮我解决这个问题吗? 谢谢你。

这是HTML文件 basic_editor.html 的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Commentaires</title>

        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="screen">
        <style type="text/css" media="all">@import "lib/imgNotes.css";</style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/jquery-mousewheel@3.1.13"></script>
        <script type="text/javascript" src="lib/hammer.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/jquery-hammerjs@2.0.0"></script>
        <script type="text/javascript" src="lib/imgViewer.js"></script>
        <script type="text/javascript" src="lib/imgNotes.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; min-width: 320px;">
            <tr>
            <td style="padding: 10px">
                <h1 align="center" >Placez des points :</h1>
                <div align="center">
                    <img  id="image" src="https://1348661504.rsc.cdn77.org/.uc/ib17e91ea01021fb00d004d8fbc022a47b1c90eecedf90701c489025e0380/at-wqaxd7zcc5rsc8m8yhg.png" width="600px" /><br/>
                    <!-- <img  id="image" src="https://www.ecrion.com/wp-content/uploads/2018/06/1-Purchase-Order-Letter.png" width="600px" /><br/>  -->
                </div>
            </td>
            </tr>
            <tr>
            <td style="padding: 10px">
                <div align="center">
                    <button id="export">Exporter</button> <button id="clear">Tout effacer</button>
                </div>
            </td>
            </tr>
            <tr>
            <td style="text-align:center; padding: 10px">

                <div id=txt align="center"></div>
            </td>
            </tr>
        </table>


        <script type="text/javascript">
        ;(function($) {
            var notes = null;

                $(window).load(function() {

                    var $img = $("#image").imgNotes({

                        onEdit: function(ev, elem) {
                            var $elem = $(elem);
                            $('#NoteDialog').remove();
                            return $('<div id="NoteDialog"></div>').dialog({
                                title: "Commentaire",
                                resizable: false,
                                modal: true,
                                height: "300",
                                width: "450",
                                position: { my: "left bottom", at: "right top", of: elem},
                                buttons: {
                                    "Sauvegarder": function() {
                                        var txt = $('textarea', this).val();
                                        $elem.data("note").note = txt;
                                        $(this).dialog("close");

                                    },
                                    "Supprimer": function() {
                                        $elem.trigger("remove");
                                        $(this).dialog("close");
                                    },
                                    "Annuler": function() {
                                        $(this).dialog("close");
                                    }
                                },
                                    open: function() {
                                        $(this).css("overflow", "hidden");
                                        var textarea = $('<textarea id="txt" style="height:100%; width:100%;">');
                                        $(this).html(textarea);
                                        textarea.val($elem.data("note").note);
                                    }
                            });
                        }
                    });

                    $img.imgNotes("import", notes);



                    var $export = $("#export");
                    $export.on("click", function() {
                        var $table = $("<table/>").addClass("gridtable");
                        var notes = $img.imgNotes('export');
                        $table.append("<th>X</th><th>Y</th><th>NOTE</th>"); 
                        $.each(notes, function(index, item) {
                            $table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>");
                        });
                        $('#txt').html($table);
                    });

                    var $clear = $("#clear");
                    $clear.on("click", function() {
                        $img.imgNotes('clear');
                    });

                });
        })(jQuery);
        </script>
</body>
</html>

这是来自javascript文件 imgNotes.js 的代码:

/*
 * imgNotes
 * 
 *
 * Copyright (c) 2017 Wayne Mogg
 * Licensed under the MIT license.
 */
var curseurThis = null;
;(function($) {
    $.widget("wgm.imgNotes", $.wgm.imgViewer, {
        options: {
            canEdit: true,
            vAll: "middle",
            hAll: "middle",
            onEdit: $.noop,
            onShow: $.noop,
/*
 * Default callback to create a DOM element to indicate a note location
 *  See the examples for more elaborate alternatives.
 */
            onAdd: function() {
                this.options.vAll = "bottom";
                this.options.hAll = "middle";
                var elem = $(document.createElement('div')).addClass("marker").append($('<p class="marker-text">'+(this.notes.length+1)+'</p>'))
                                                                              .prepend($('<img>',{src: './lib/images/marker-15.svg', width:'110%'})).attr("title","")
                                                                              .draggable({
                                                                                    start: function() {

                                                                                    },
                                                                                    drag: function() {

                                                                                    },
                                                                                    stop: function(ev, ui) {
                                                                                        var pos = ui.helper.position(); 

                                                                                        if(curseurThis != null){
                                                                                            ev.preventDefault();
                                                                                            var self = curseurThis;
                                                                                            var rpos = self.cursorToImg(ev.pageX, ev.pageY);


                                                                                            elem.data("note").y = rpos.y;
                                                                                            elem.data("note").x = rpos.x;

                                                                                            self.options.onUpdateMarker.call(self, this);

                                                                                        }



                                                                                    }
                                                                                });
                $(elem).tooltip({
                    content: function() {
                        return $(elem).data("note").note;
                    },
                    show: false,
                    hide: {delay:700},
                    position: {
                        within: $(this.view),
                        collision: "flipfit"
                    }
                });
                return elem;
            },
/*
 *  Default callback when the markers are repainted
 */
            onUpdateMarker: function(elem) {

                const compensX = -0.5; // Compensation par rapport à la taille du curseur sur axe X
                const compensY = 11; // Compensation par rapport à la taille du curseur sur axe Y
                var $elem = $(elem),
                    note = $elem.data("note");
                var pos = this.imgToView(note.x, note.y);
                if (pos) {
                    $elem.css({
                        left: (pos.x+compensX - $elem.data("xOffset")),
                        top: (pos.y+compensY - $elem.data("yOffset")),
                        position: "absolute"
                    });
                }
            },
/*
 *  Default callback when the image view is repainted
 */
            onUpdate: function() {

                var self = this;
                $.each(this.notes, function() {
                    self.options.onUpdateMarker.call(self, this);
                });
            }
        },

        _create: function() {

//          the note/marker elements
            this.notes = [];
            var self = this;
            curseurThis = this;
            this.options.onClick =  function(ev) {
                                        if (self.options.canEdit) {
                                            ev.preventDefault();
                                            var rpos = self.cursorToImg(ev.pageX, ev.pageY);
                                            if (rpos) {
                                                var elem = self.addNote({x: rpos.x, y: rpos.y, note: ""});
                                                self.options.onEdit.call(self, ev, elem);
                                            }
                                        }
                                    };
            this._super();
        },

        _destroy: function() {
            this.clear();
            this._super();
        },
/*
 *  Add a note 
 */
        addNote: function(note) {
            var self = this,
                elem = this.options.onAdd.call(this, note),
                $elem = $(elem);
            $(this.view).append(elem);
            $elem.data("note", note);

            switch (this.options.vAll) {
                case "top": $elem.data("yOffset", 0); break;
                case "bottom": $elem.data("yOffset", $elem.height()); break;
                case "middle": $elem.data("yOffset", Math.round($elem.height()/2)); break;
                default: $elem.data("yOffset", 0);
            }
            switch (this.options.hAll) {
                case "left": $elem.data("xOffset", 0); break;
                case "right": $elem.data("xOffset", $elem.width()); break;
                case "middle": $elem.data("xOffset", Math.round($elem.width()/2)); break;
                default: $elem.data("xOffset", 0);
            }
            $elem.click(function(ev) {
                ev.preventDefault();
                if (self.options.canEdit) {
                    self.options.onEdit.call(self, ev, elem);
                } else {
                    self.options.onShow.call( self, ev, elem);
                }
            });
            $elem.on("remove", function() {
                self._delete(elem);
            });
            this.notes.push(elem);
            this.update();
            return elem;

        },
/*
 *  Number of notes
 */
        count: function() {
            return this.notes.length;
        },
/*
 *  Delete a note
 */
        _delete: function(elem) {
            this.noteCount--;
            this.notes = this.notes.filter(function(v) { return v!== elem; });
            $(elem).off();
            $(elem).remove();
            this.update();
        },
/*
 *  Clear all notes
 */
        clear: function() {
            var num = this.notes.length;
            for ( var i = 0; i < num; i++ ){
                var elem = this.notes[i];
                elem.off();
                elem.remove();
            }
            this.notes=[];
        },

/*
 *  Add notes from a javascript array
 */
        import: function(notes) {
            if (this.ready) {
                var self = this;
                $.each(notes, function() {
                    self.addNote(this);
                });
            }
        },


/*
 *  Export notes to an array
 */
        export: function() {
            var notes = [];
            $.each(this.notes, function() {
                var note = $(this).data("note");
                notes.push(note);
            });
            return notes;
        }

    });
})(jQuery);

这是来自javascript文件 imgViewer.js 的代码:

/*
 * imgViewer
 * 
 *
 * Copyright (c) 2013 Wayne Mogg
 * Licensed under the MIT license.
 */

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();
/*
 *  imgViewer plugin starts here
 */ 
;(function($) {
    $.widget("wgm.imgViewer", {
        options: {
            zoomStep: 0.1,
            zoom: 1,
            zoomMax: undefined,
            zoomable: true,
            dragable: true,
            onReady: $.noop,
            onClick: $.noop,
            onUpdate: $.noop
        },

        _create: function() {
            var self = this;
            if (!this.element.is("img")) {
                $.error('imgviewer plugin can only be applied to img elements');
            }
//      the original img element
            self.img = self.element[0];
            var $img = $(self.img);
/*
 *      a copy of the original image to be positioned over it and manipulated to
 *      provide zoom and pan
 */
            self.zimg = $("<img />", {"src": self.img.src}).appendTo("body").wrap("<div class='viewport' />");
            var $zimg = $(self.zimg);
//      the container or viewport for the image view
            self.view = $(self.zimg).parent();
            var $view = $(self.view);
//      the pixel coordinate of the original image at the center of the viewport
            self.vCenter = {};
//      a flag used to decide if a mouse click is part of a drag or a proper click
            self.drag = false;
            self.pinch = false;
//      a flag used to check the target image has loaded
            self.ready = false;
            $img.one("load",function() {
//          get and some geometry information about the image
                self.ready = true;
                var width = $img.width(),
                    height = $img.height(),
                    offset = $img.offset();
//          cache the image padding information
                    self.offsetPadding = {
                            top: parseInt($img.css('padding-top'),10),
                            left: parseInt($img.css('padding-left'),10),
                            right: parseInt($img.css('padding-right'),10),
                            bottom: parseInt($img.css('padding-bottom'),10)
                    };
/*
 *          cache the image margin/border size information
 *          because of IE8 limitations left and right borders are assumed to be the same width 
 *          and likewise top and bottom borders
 */
                    self.offsetBorder = {
                            x: Math.round(($img.outerWidth()-$img.innerWidth())/2),
                            y: Math.round(($img.outerHeight()-$img.innerHeight())/2)
                    };
/*
 *          define the css style for the view container using absolute positioning to
 *          put it directly over the original image
 */
                    var vTop = offset.top + self.offsetBorder.y + self.offsetPadding.top,
                        vLeft = offset.left + self.offsetBorder.x + self.offsetPadding.left;

                    $view.css({
                                position: "absolute",
                                overflow: "hidden",
                                top: vTop+"px",
                                left: vLeft+"px",
                                width: width+"px",
                                height: height+"px"
                    });
//          the zoom and pan image is position relative to the view container
                    $zimg.css({
                                position: "relative",
                                top: 0+"px",
                                left: 0+"px",
                                width: width+"px",
                                height: height+"px",
                                "-webkit-tap-highlight-color": "transparent"
                    });
//          the initial view is centered at the orignal image
                    self.vCenter = {
                                    x: width/2,
                                    y: height/2
                    };
                    self.update();
            }).each(function() {
                if (this.complete) { $(this).trigger("load"); }
            });
/*
 *          Render loop code during dragging and scaling using requestAnimationFrame
 */
            self.render = false;
/*
 *      Event handlers
 */
            $zimg.hammer();

            if (self.options.zoomable) {
                self._bind_zoom_events();
            }
            if (self.options.dragable) {
                self._bind_drag_events();
            }
            $zimg.on("tap", function(ev) {
                ev.preventDefault();
                if (!self.dragging) {
                    var scoff = self._get_scroll_offset();
                    ev.pageX = ev.gesture.center.x + scoff.x;
                    ev.pageY = ev.gesture.center.y + scoff.y;
                    self.options.onClick.call(self, ev);
                }
            });         
/*
 *      Window resize handler
 */

            $(window).resize(function() {
                self._view_resize();
                waitForFinalEvent(function(){
                    self._view_resize();
                }, 300, $img[0].id);

            });
            self._view_resize();

            self.options.onReady.call(self);
        },
/*
 *  Return the window scroll offset - required to convert Hammer.js event coords to page locations
 */
        _get_scroll_offset: function() {
            var sx,sy;
            if (window.scrollX === undefined) {
                if (window.pageXOffset === undefined) {
                    sx = document.documentElement.scrollLeft;
                    sy = document.documentElement.scrollTop;
                } else {
                    sx = window.pageXOffset;
                    sy = window.pageYOffset;
                }
            } else {
                sx = window.scrollX;
                sy = window.scrollY;
            }
            return {x: sx, y: sy};
        },
/*
 *  View resize - the aim is to keep the view centered on the same location in the original image
 */
        _view_resize: function() {
            if (this.ready) {
                var $view = $(this.view),
                    $img = $(this.img),
                    width = $img.width(),
                    height = $img.height(),
                    offset = $img.offset(),
                    vTop = Math.round(offset.top + this.offsetBorder.y + this.offsetPadding.top),
                    vLeft = Math.round(offset.left + this.offsetBorder.x + this.offsetPadding.left);
                this.vCenter.x *=$img.width()/$view.width();
                this.vCenter.y *= $img.height()/$view.height(); 
                $view.css({
                            top: vTop+"px",
                            left: vLeft+"px",
                            width: width+"px",
                            height: height+"px"
                });

                this.update();
            }
        },
/*
 *  Bind events
 */
        _bind_zoom_events: function() {
            var self = this;
            var $zimg = $(self.zimg);

            function doRender() {
                if (self.render) {
                    window.requestAnimationFrame(doRender);
                    self.update();
                }
            }
            function startRenderLoop() {
                if (!self.render) {
                    self.render = true;
                    doRender();
                }
            }
            function stopRenderLoop() {
                self.render = false;
            }

            $zimg.on("mousewheel", function(ev) {
                    ev.preventDefault();
                    var delta = ev.deltaY ;
                    self.options.zoom += delta * self.options.zoomStep;
                    self.update();
            });

            $zimg.on("touchmove", function(e) {
                e.preventDefault();
//              e.stopPropagation();
            });
            $zimg.data("hammer").recognizers[1].options.enable = true;

            $zimg.on("pinchstart", function() {
            });

            $zimg.on("pinch", function(ev) {
                ev.preventDefault();
                if (!self.pinch) {
                    var scoff = self._get_scroll_offset();
                    self.pinchstart = { x: ev.gesture.center.x+scoff.x, y: ev.gesture.center.y+scoff.y};
                    self.pinchstartrelpos = self.cursorToImg(self.pinchstart.x, self.pinchstart.y);
                    self.pinchstart_scale = self.options.zoom;
                    startRenderLoop();
                    self.pinch = true;
                } else {
                    self.options.zoom = ev.gesture.scale * self.pinchstart_scale;
                    var npos = self.imgToCursor( self.pinchstartrelpos.x, self.pinchstartrelpos.y);
                    self.vCenter.x = self.vCenter.x + (npos.x - self.pinchstart.x)/self.options.zoom;
                    self.vCenter.y = self.vCenter.y + (npos.y - self.pinchstart.y)/self.options.zoom;
                }
            });

            $zimg.on("pinchend", function(ev) {
                ev.preventDefault();
                if (self.pinch) {
                    stopRenderLoop();
                    self.update();
                    self.pinch = false;
                }
            });
        },

        _bind_drag_events: function() {
            var self = this;
            var $zimg = $(self.zimg);
            function doRender() {
                if (self.render) {
                    window.requestAnimationFrame(doRender);
                    self.update();
                }
            }
            function startRenderLoop() {
                if (!self.render) {
                    self.render = true;
                    doRender();
                }
            }
            function stopRenderLoop() {
                self.render = false;
            }
            $zimg.on("mousedown", function(e) {
                e.preventDefault();
            });
            $zimg.on("panstart", function() {
            });

            $zimg.on("panmove", function(ev) {
                ev.preventDefault();
                if (!self.drag) {
                    self.drag = true;
                    self.dragXorg = self.vCenter.x;
                    self.dragYorg = self.vCenter.y;
                    startRenderLoop();
                } else {
                    self.vCenter.x = self.dragXorg - ev.gesture.deltaX/self.options.zoom;
                    self.vCenter.y = self.dragYorg - ev.gesture.deltaY/self.options.zoom;
                }
            });

            $zimg.on( "panend", function(ev) {
                ev.preventDefault();
                if (self.drag) {
                    self.drag = false;
                    stopRenderLoop();
                    self.update();
                }
            });
        },
/*
 *  Unbind events
 */
        _unbind_zoom_events: function() {
            var self = this;
            var $zimg = $(self.zimg);
            $zimg.data("hammer").recognizers[1].options.enable = false;
            $zimg.off("mousewheel");
            $zimg.off("pinchstart");
            $zimg.off("pinch");
            $zimg.off("pinchend");
        },  

        _unbind_drag_events: function() {
            var self = this;
            var $zimg = $(self.zimg);
            $zimg.off("pan");
            $zimg.off("panend");
        },  

/*
 *  Remove the plugin
 */  
        destroy: function() {
            var $zimg = $(this.zimg);
            $zimg.unbind("click");
            $(window).unbind("resize");
            $zimg.remove();
            $(this.view).remove();
            $.Widget.prototype.destroy.call(this);
        },

        _setOption: function(key, value) {
            switch(key) {
                case 'zoom':
                    if (parseFloat(value) < 1 || isNaN(parseFloat(value))) {
                        return;
                    }
                    break;
                case 'zoomStep':
                    if (parseFloat(value) <= 0 ||  isNaN(parseFloat(value))) {
                        return;
                    }
                    break;
                case 'zoomMax':
                    if (parseFloat(value) < 1 || isNaN(parseFloat(value))) {
                        return;
                    }
                    break;
            }
            var version = $.ui.version.split('.');
            if (version[0] > 1 || version[1] > 8) {
                this._super(key, value);
            } else {
                $.Widget.prototype._setOption.apply(this, arguments);
            }
            switch(key) {
                case 'zoom':
                    if (this.ready) {
                        this.update();
                    }
                    break;
                case 'zoomable':
                    if (this.options.zoomable) {
                        this._bind_zoom_events();
                    } else {
                        this._unbind_zoom_events();
                    }
                    break;
                case 'dragable':
                    if (this.options.dragable) {
                        this._bind_drag_events();
                    } else {
                        this._unbind_drag_events();
                    }
                    break;
                case 'zoomMax':
                    if (this.ready) {
                        this._view_resize();
                        this.update();
                    }
                    break;
            }
        },

        addElem: function(elem) {
            $(this.view).append(elem);
        },
/*
 *  Test if a relative image coordinate is visible in the current view
 */
        isVisible: function(relx, rely) {
            var view = this.getView();
            if (view) {
                return (relx >= view.left && relx <= view.right && rely >= view.top && rely <= view.bottom);
            } else {
                return false;
            }
        },
/*
 *  Get relative image coordinates of current view
 */
        getView: function() {
            if (this.ready) {
                var $img = $(this.img),
                    width = $img.width(),
                    height = $img.height(),
                    zoom = this.options.zoom;
                return {
                    top: this.vCenter.y/height - 0.5/zoom,
                    left: this.vCenter.x/width - 0.5/zoom,
                    bottom: this.vCenter.y/height + 0.5/zoom,
                    right: this.vCenter.x/width + 0.5/zoom
                };
            } else {
                return null;
            }
        },
/*
 *  Pan the view to be centred at the given relative image location
 */
        panTo: function(relx, rely) {
            if ( this.ready && relx >= 0 && relx <= 1 && rely >= 0 && rely <=1 ) {
                var $img = $(this.img),
                    width = $img.width(),
                    height = $img.height();
                this.vCenter.x = relx * width;
                this.vCenter.y = rely * height;
                this.update();
                return { x: this.vCenter.x/width, y: this.vCenter.y/height };
            } else {
                return null;
            }
        },
/*
 *  Convert a relative image location to a viewport pixel location
 */  
        imgToView: function(relx, rely) {
            if ( this.ready && relx >= 0 && relx <= 1 && rely >= 0 && rely <=1 ) {
                var $img = $(this.img),
                    width = $img.width(),
                    height = $img.height();                     

                var zLeft = width/2 - this.vCenter.x * this.options.zoom;
                var zTop =  height/2 - this.vCenter.y * this.options.zoom;
                var vx = relx * width * this.options.zoom + zLeft;
                var vy = rely * height * this.options.zoom + zTop;
                return { x: Math.round(vx), y: Math.round(vy) };
            } else {                        

                return null;
            }
        },
/*
 *  Convert a relative image location to a page pixel location
 */  
        imgToCursor: function(relx, rely) {
            var pos = this.imgToView(relx, rely);
            if (pos) {
                var offset = $(this.img).offset();
                pos.x += offset.left + this.offsetBorder.x + this.offsetPadding.left;
                pos.y += offset.top + this.offsetBorder.y + this.offsetPadding.top;
                return pos;
            } else {
                return null;
            }
        },
/*
 *  Convert a viewport pixel location to a relative image coordinate
 */     
        viewToImg: function(vx, vy) {
            if (this.ready) {
                var $img = $(this.img),
                    width = $img.width(),
                    height = $img.height();
                var zLeft = width/2 - this.vCenter.x * this.options.zoom;
                var zTop =  height/2 - this.vCenter.y * this.options.zoom;
                var relx= (vx - zLeft)/(width * this.options.zoom);
                var rely = (vy - zTop)/(height * this.options.zoom);
                if (relx>=0 && relx<=1 && rely>=0 && rely<=1) {
                    return {x: relx, y: rely};
                } else {
                    return null;
                }
            } else {
                return null;
            }
        },

/*
 *  Convert a page pixel location to a relative image coordinate
 */     
        cursorToImg: function(cx, cy) {
            if (this.ready) {
                var $img = $(this.img),
                    width = $img.width(),
                    height = $img.height(),
                    offset = $img.offset();
                var zLeft = width/2 - this.vCenter.x * this.options.zoom;
                var zTop =  height/2 - this.vCenter.y * this.options.zoom;
                var relx = (cx - offset.left - this.offsetBorder.x - this.offsetPadding.left- zLeft)/(width * this.options.zoom);
                var rely = (cy - offset.top - this.offsetBorder.y - this.offsetPadding.top - zTop)/(height * this.options.zoom);
                if (relx>=0 && relx<=1 && rely>=0 && rely<=1) {
                    return {x: relx, y: rely};
                } else {
                    return null;
                }
            } else {
                return null;
            }
        },
/*
 * Convert relative image coordinate to Image pixel
 */
        relposToImage: function(pos) {
            if (this.ready) {
                var img = this.img,
                    width = img.naturalWidth,
                    height = img.naturalHeight;
                return {x: Math.round(pos.x*width), y: Math.round(pos.y*height)};
            } else {
                return null;
            }
        },
/*
 *  Adjust the display of the image  
 */
        update: function() {
            if (this.ready) {
                var zTop, zLeft, zWidth, zHeight,
                    $img = $(this.img),
                    width = $img.width(),
                    height = $img.height(),
//                  offset = $img.offset(),
                    zoom = this.options.zoom,
                    zoomMax = this.options.zoomMax,
                    half_width = width/2,
                    half_height = height/2;

                zoom = zoomMax === undefined ? zoom : Math.min(zoom, zoomMax);
                this.options.zoom = zoom;

                if (zoom <= 1) {
                    zTop = 0;
                    zLeft = 0;
                    zWidth = width;
                    zHeight = height;
                    this.vCenter = { 
                                    x: half_width,
                                    y: half_height
                    };
                    this.options.zoom = 1;
                    zoom = 1;
                } else {
                    zTop = Math.round(half_height - this.vCenter.y * zoom);
                    zLeft = Math.round(half_width - this.vCenter.x * zoom);
                    zWidth = Math.round(width * zoom);
                    zHeight = Math.round(height * zoom);
/*
 *          adjust the view center so the image edges snap to the edge of the view
 */
                    if (zLeft > 0) {
                        this.vCenter.x = half_width/zoom;
                        zLeft = 0;
                    } else if (zLeft+zWidth < width) {
                        this.vCenter.x = width - half_width/zoom ;
                        zLeft = width - zWidth;
                    }
                    if (zTop > 0) {
                        this.vCenter.y = half_height/zoom;
                        zTop = 0;
                    } else if (zTop + zHeight < height) {
                        this.vCenter.y = height - half_height/zoom;
                        zTop = height - zHeight;
                    }
                }
                $(this.zimg).css({
                                width: width+"px",
                                height: height+"px"
                });

                var xt = -(this.vCenter.x - half_width)*zoom;
                var yt = -(this.vCenter.y - half_height)*zoom;
                $(this.zimg).css({transform: "translate(" + xt + "px," + yt + "px) scale(" + zoom + "," + zoom + ")" });
/*
 *      define the onUpdate option to do something after the image is redisplayed
 *      probably shouldn't pass out the this object - need to think of something better
 */
                this.options.onUpdate.call(this);
            }
        }
    });
})(jQuery);

如果您愿意,这些是我项目基础的链接,它是另一个人的项目,并将其上传到github,但其中不包含我的更改。也许它可以帮助您:enter link description here

0 个答案:

没有答案
相关问题