JQuery, как масштабировать изображение с маркерами - PullRequest
Новая
       37

JQuery, как масштабировать изображение с маркерами

0 голосов
/ 01 июня 2018

У меня есть это: 

<style>
#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture img {
    width: 100%;
    height: auto;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
}
</style>

<div id="pic_wrapper">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

и добавление маркеров к изображению с помощью: 

<script type="text/javascript" charset="UTF-8">
$(function(){
    $('#selected_picture').on('click', function(e){
        offset = $('#selected_picture').offset();
        x = e.pageX - offset.left - 25;
        y = e.pageY - offset.top - 25;
        var pin = $('<div class="pin"><img class="pin-img" src="pin.png" /></div>');
        pin.uniqueId();
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();

Мне нужно масштабировать #selected_picture вместе со всеми выводами, чтобы они оставались нате же относительные позиции.

Я нашел этот пример для текста в div: https://codepen.io/chriscoyier/pen/VvRoWy

Но я могу понять, как применить подход к моей картинке с изменяемым размером с абсолютно позиционированными булавками на ней.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 01 июня 2018

Идея здесь проста: вы рассчитываете процентное положение булавки по отношению к изображению, на которое вы нажимаете.Когда вы используете position: absolute со значениями в процентах top / left, он сообщает браузеру позиционировать элемент в процентах от относительно родителя ширина / высота, поэтому после изменения родительских размеров ваши позиции будуттакже автоматически обновляется. 

$(function(){
    $('#selected_picture').on('click', function(e){
        x = ((e.offsetX) / $(this).width()) * 100 + "%";
        y = ((e.offsetY) / $(this).height()) * 100 + "%";
        var pin = $('<div class="pin"></div>');
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();
    })
});
#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture .map {
    display: block;
    background: green;
    width: 100%;
    height: 250px;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_wrapper">
    <div id="selected_picture">
        <div class="map"></div>
    </div>
</div>
...