How can I mark in the Circle use React or vanilla.js

楊嘉翔 0
Viewed 23

I want to use mark in the circle,onClick mark the dot,out put the json obj
Is there any npm package to use
enter image description here

onClick
enter image description here

npm reactjs javascript css html
1 Answers

Just get click position relative to parent tag, and then move the child tag using style left/top.

// get reference
let outer = document.getElementById("container");
let inner = document.getElementById("circle");

// add click listener to parent tag
outer.addEventListener("click", function(event) {
    let result = {
    Azimut: {
        x: event.offsetX,
        y: event.offsetY,
    },
    Size: 10,
  }
  
  //
  inner.style.top = (result.Azimut.y - result.Size / 2) + "px"; //
  inner.style.left = (result.Azimut.x  - result.Size / 2) + "px";
  inner.style.width = result.Size + "px";
  inner.style.height = result.Size + "px";

})
<div id="container" style="
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;">
  <div id="circle" style="
    border: 1px solid black;
    position: absolute;
  "></div>
<div>

var0
Related