Ajouter un cercle en cliquant sur une image dans react

Question

J'essaie de créer un programme qui ajoute un cercle à une image lorsque vous cliquez. Lorsque vous cliquez sur (x, y), un cercle apparaîtra à (x, y) avec un rayon de 10. Je ne sais pas comment faire quelque chose de type méta-programmation pour pouvoir avoir N nombre de cercles en réaction. Idéalement, je pourrais le faire

for (let i = 0; i<N;i++){
<circle thingy x=Xs[i] y = Ys[i]/>
}

Ensuite, il se met à jour automatiquement chaque fois que vous cliquez sur l'image et ajoute un cercle. Donc, si vous cliquez 10 fois, il y aurait 10 cercles, et si vous cliquez une fois de plus, un autre cercle apparaîtrait immédiatement.

Answer 1

Je pense que ce que vous devez faire est d'écouter les clics sur un SVG, puis d'ajouter des cercles aux coordonnées où ces clics se produisent. Quelque chose comme ça fonctionnera:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [circles, setCircles] = useState([]);

  const getClickCoords = (event) => {
    // from: https://stackoverflow.com/a/29296049/14198287
    var e = event.target;
    var dim = e.getBoundingClientRect();
    var x = event.clientX - dim.left;
    var y = event.clientY - dim.top;
    return [x, y];
  };

  const addCircle = (event) => {
    // get click coordinates
    let [x, y] = getClickCoords(event);

    // make new svg circle element
    // more info here: https://www.w3schools.com/graphics/svg_circle.asp
    let newCircle = (
      <circle
        key={circles.length + 1}
        cx={x}
        cy={y}
        r="20"
        stroke="black"
        strokeWidth="1"
        fill="red"
      />
    );

    // update the array of circles; you HAVE to spread the current array
    // as 'circles' is immutible and will not accept new info
    let allCircles = [...circles, newCircle];

    // update 'circles'
    setCircles(allCircles);
  };

  console.log(circles);

  return (
    <Container>
      <h1>Big Pythagoras Pizza</h1>
      <h2>Click to add pepperoni:</h2>
      <ClickableSVG onClick={addCircle}>
        {/* This loads your circles in the circles hook here */}
        {circles}
      </ClickableSVG>
    </Container>
  );
}

const Container = styled.div`
  width: 100%;
  hieght: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const ClickableSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-image: url('https://storage.pizzapizza.ca/phx2/ppl_images/category/en/2x/create_your_own_5.png');
  & * {
    /* Block your circles from triggering 'add circle' */
    pointer-events: none;
  }
`;

CodeSandbox: https://codesandbox.io/s/stack-pepperoni-pizza-8dffl

---

Questions connexes:

• Comment obtenir les coordonnées du clic par rapport à l'élément SVG contenant l'écouteur onclick?