eu tenho umdiv nomeadamenteimage_preview com uma imagem dentro dela. Há uma caixa de entrada para obter o raio do círculo do usuário. Quando clico em um ponto da imagem, preciso de um círculo com esse ponto como centro e o raio inserido como raio. O círculo deve ser marcado com um marcador. odiv com idhotspot_display funciona como marcador ediv circle atua como o círculo a ser exibido. Ambos estão absolutamente posicionados. O marcador tem como fundo uma imagem com a dimensão 24X24.

Sempre que clico, clones do marcador e do círculo são criados e posicionados em torno do ponto em que clicamos. As posições do marcador e do círculo são alteradas com o clique do mouse (você encontrará o link do violino no final desta pergunta).

Eu posso capturar a coordenada do ponto em que clico comoffset eclientX etc. o código para o qual se segue:

HTML: Imagem:

<input type="text" value="0"  class="radius" name="radius"/>

<div id="image_preview">

    <img src="https://i.imgur.com/B7VsSq3.png" alt="background" />



    <div id="hotspot_display"></div>

    <div class="circle" style="background-color: #858585; position: absolute;"></div>

</div><!-- end of id image_preview-->

<div id="hotspot_answer_points">


</div><!-- end of id hotspot_answer_points-->

JS:

   $('#image_preview').bind('click', function (ev) {

                var $div = $(ev.target);
                var $div = $(this);
                var $display =  $('#image_preview').find('#hotspot_display');
                var offset_t = $(this).offset().top - $(window).scrollTop();
                var offset_l = $(this).offset().left - $(window).scrollLeft();

                var left = Math.round( (ev.clientX - offset_l) );
                var top = Math.round( (ev.clientY - offset_t) );

                if(window.console){

                    console.log("left = "+left+" top = "+top);

                }


                var display_clone=$display.clone().show();
                display_clone.css({'top':top+33,'left':left+10,'display':'block'});

});

O código dedisplay_clone.css tem em seu parâmetro alguns valores (33 e 10) adicionados aleft etop sem o qual não posso obter o marcador do centro da imagem, apenas na coordenada.

Questão 1) Eu apenas usei aleatoriamente os valores de 33 e 10 a serem adicionados. Que cálculo realmente deve ser feito aqui, pois esses números a serem adicionados podem variar Se meu código HTML estiver dentro de uma página HTML complexa?

Questão 2: Não consigo que o centro do círculo seja a coordenada em que clicou. Qual deve ser o caminho até aqui?

Todo o cenário éaqui em um violino.

EDITAR: Meu cenário tem duas partes. A situação mencionada acima ocorre em uma área administrativa. Na área do usuário, mostro novamente a imagem dentro de umdiv nomeadamentehotspot_user_area. Salvei as coordenadas clicadas no banco de dados na área de administração. Na área de usuário I, tenho o HTML:

<div id="hotspot_user_area">

<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />

</div>

Pego as coordenadas do banco de dados e quero mostrá-las com marcadores nohotspot_user_area na imagem. Suponha que eu receba a coordenada do DB como variávelx1 ey1; Agora, se eu usar o seguinte código deRoko C. Buljanresposta, não vai funcionar:

 $("<div />", {
      "class": "circle",
      css: {
        top: y1,
        left: x1,
        width: r * 2,
        height: r * 2,
      },
      appendTo: $this // append to #image_preview!
    }).

Isso não funciona porque no painel de administraçãoleft etop propriedades têm os valoresx ey respectivamente, com o seguinte cálculo:

y = ev.pageY - o.top,
x = ev.pageX - o.left;

Então, como posso colocar os marcadores no mesmo local da imagem em qualquerdiv a imagem é colocada novamente?