Draw a circle on an image with JavaScript

Question

Draw a circle on an image with JavaScript

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I have an image and when I click on this image, I want to circle the location where I clicked.

I also need to get the position to save to the bank later, because when I open the image again, I need to draw the circle again in the same position.

It will always be the same image, with the same size, I need to do this in JavaScript. I appreciate the attention.

javascript canvas image

asked by anonymous 24.11.2017 / 05:35

2 answers

How to pass the data from one switch button to another acivity? Button to open / close content

score 3 · Answer 1

From what I understood was this what you wanted?

jQuery(document).ready(function(){
    $('#special').attr('height', $('#special').css('height'));
    $('#special').attr('width', $('#special').css('width'));
    
    $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        $('#status2').html(x +', '+ y); 
   });
})

#special {
    width: 500px;
    height: 500px;
    border:1px ridge green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><h2id="status2">0, 0</h2>
    <canvas id="special">Not supported</canvas>
</body>

The same code in JSFiddle

score 2 · Answer 2

You can use the D3.js library, see this example:

// Define as variáveis

// Campos para armazenar a posição
let posX = document.querySelector('#posX');
let posY = document.querySelector('#posY');

// Seleciona o elemento SVG e armazena na variável sua altura e largura
let svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
// Define o tamanho do circulo
    radius = 20;

// URL da imagem de fundo
let src = 'https://i2.wp.com/cafeinacodificada.com.br/wp-content/uploads/2016/03/61_B.jpg?resize=600%2C320';
// Cria um elemento image e define sua URL
svg.append("image").attr("xlink:href", src);

// Armazena as posições do Circulos criados
let data = [];

let xScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.x_pos
    })]).range([0, width]);

svg.selectAll("circle") // Atualiza
    .data(data)
    .enter().append("circle")
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", radius)
    .style("fill", "lightblue")
    .attr('id', function(d, i) {
        return 'rect_' + i;
    })
    .on("click", removerCirculo);

// Define o evento Click no elemento SVG
svg.on("click", function() {
    let coords = d3.mouse(this);
    // Armazena a cordenada do click
    let pos = {
        x: d3.event.x,
        y: d3.event.y
    };
    posX.value = 'Posição X: ' + pos.x + '';
    posY.value = 'Posição Y: ' + pos.y + '';

    // Como vai trabalhar apenas com um circulo
    data = []; // Reseta
    svg.selectAll('circle').remove(); // Remove todos os circulos
    
    data.push(pos); // Após resetar e remover todos os circulos, diciona um novo
    
    svg.selectAll("circle") // Atualiza
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", radius)
    .attr('id', function(d, i) {
        return 'circulo_' + i;
    })
    .on("click", removerCirculo);
})

function removerCirculo(d) {
    d3.event.stopPropagation();
    data = data.filter(function(e){
        return e != d;
    });
    d3.select(this).remove(); // Remove o circulo que recebeu o click
    posX.value = 'Circulo removido';
    posY.value = 'Circulo removido';
}

circle {
  fill: red; /* cor do fundo */
}

<!-- IMPORTA A BIBLIOTECA D3.js -->
<script src="//d3js.org/d3.v4.min.js"></script>

<!-- O TAMANHO DEFINIDO AQUI, FOI O MESMO DA IMAGEM -->
<svg width="450" height="271"></svg>
<!-- CAMPOS PARA ARMAZENAR A POSIÇÃO -->
<p><input type="text" id="posX" /></p>
<p><input type="text" id="posY" /></p>

To learn more, just go to repository in GitHub , have Sample Gallery and documentation in English , the translation is out of date, but you can find in GitHub user Jean Bauer .