CODEWITHSUNDEEP
javascript
VeggieBot
VeggieBot

Reputation: 77

How to convert this js grid into a Cartesian coordinate system?

Hello i am working with this js which provides coordinates for the place you click in the container. However you will notice 0 is starting in the top left. I would like 0 to always be dead center like a Cartesian Coordinate system. Im just not sure how to do it outside of a canvas.

This is what i got so far but how to define the center as 0?

function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x - 6).toString() + "px";
    document.getElementById("cross").style.top = (pos_y - 10).toString() + "px";
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
}
#pointer_div {
    background-image: url('http://www.emanueleferonato.com/images/sun.jpg');
    width: 500px;
    height: 333px;
}
#cross {
    position: relative;
    visibility: hidden;
    z-index: 2;
    color: white;
    font-size: 14px;
}
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)"><i id="cross" class="fa fa-times"></i></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>

Upvotes: 0

Views: 246

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

that ?

const 
  crossElement = document.getElementById('cross')
, pointerDiv   = document.getElementById('pointer_div')
  ;
pointerDiv.onclick = e =>
  {
  let 
    pos_x =  e.offsetX - pointerDiv.offsetLeft
  , pos_y =  e.offsetY - pointerDiv.offsetTop
    ;
  crossElement.style.left         = `${pos_x - 4 + pointerDiv.offsetLeft }px`
  crossElement.style.top          = `${pos_y -10 + pointerDiv.offsetTop  }px`
  crossElement.style.visibility   = 'visible' 

  document.pointform.form_x.value = pos_x - 250    // ( 500 / 2)
  document.pointform.form_y.value = pos_y - 166.5  // ( 333 / 2)
  }
#pointer_div {
  background-image : url('http://www.emanueleferonato.com/images/sun.jpg');
  width            : 500px;
  height           : 333px;
  cursor           : crosshair;
  }
#cross {
  position   : relative;
  visibility : hidden;
  z-index    : 2;
  color      : white;
  font-size  : 14px;
  }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<form name="pointform">
  <div id="pointer_div">
    <i id="cross" class="fa fa-times"></i>
  </div>
  You pointed on x = 
  <input type="text" name="form_x" size="4" > 
  - y = 
  <input type="text" name="form_y" size="4" >
</form>

Upvotes: 1

Justin
Justin

Reputation: 2958

You can use an event Listener to accomplish this. You will need to account for the position of the div using getBoundingCLientRect().

e.x - element.x

Then you can just subtract half the width and height to the equation

e.x - pointerBnds.x - pointerBnds.width/2;


let pointerDiv = document.getElementById('pointer_div')
let pointerBnds = pointerDiv.getBoundingClientRect();
let CrossElement = document.getElementById('cross')

pointerDiv.addEventListener('click', e => {
  let x = e.x - pointerBnds.x - pointerBnds.width/2;
  let y = e.y - pointerBnds.y - pointerBnds.height/2;
  CrossElement.style.left = (e.x - pointerBnds.x - 7).toString()+'px'
   CrossElement.style.top = (e.y - pointerBnds.y - 10).toString()+'px'
   CrossElement.style.visibility = 'visible'
  
  document.pointform.form_x.value = x
  document.pointform.form_y.value = -y 
})
#pointer_div {
  background-image: url('http://www.emanueleferonato.com/images/sun.jpg');
  width: 500px;
  height: 333px;
  border: 1px solid black;
  }
#cross {
  position: relative;
  visibility: hidden;
  z-index: 2;
  color: white;
  font-size: 14px;
  }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<form name="pointform" method="post">
<div id="pointer_div"><i id="cross" class="fa fa-times"></i></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>

Upvotes: 1

Related Questions