如何将这个js网格转换成笛卡尔坐标系?

Question

你好，我正在使用这个js，它为您在容器中单击的地方提供坐标。但是你会注意到0是从左上角开始的。我希望0永远是死点，就像笛卡尔坐标系一样。我只是不知道如何在画布之外做到这一点。

这就是我到目前为止得到的，但如何将中心定义为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>

Answer 1

您可以使用事件侦听器来完成此操作。您需要使用getBoundingCLientRect()来说明div的位置。

e.x - element.x

那么你就可以在等式

中减去宽度和高度的一半

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>

Answer 2

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>