Home » Jquery » javascript – How to get relative image coordinate of this div?

javascript – How to get relative image coordinate of this div?

Posted by: admin February 22, 2020 Leave a comment

Questions:

How to get relative image coordinate of this div ?
It’s a number between 0 and 1 and indicate position relative to the background image.

<div class="marker ui-draggable ui-draggable-handle" title="" style="position: absolute; left: 297.5px; top: 236px;">
<img src="./lib/images/marker-15.svg" style="width: 110%;">
<p class="marker-text">1</p>
</div>

I found a function for getting cursor relative image coordinate but I don’t know how to do for this div :

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;
            }
        },

Thank’s in advance.

How to&Answer: