javascript - X 和 Y 坐标的简单笛卡尔平面，原点位于中心

Question

我编写了以下代码，以便从图像中心显示用户鼠标点击的坐标(我在代码中的其他位置上传)。

    $( document ).ready( function(e)
    {
        $( '#ClickBox' ).click( function(e)
        {
            var coordX = ( e.pageX - $( this ).offset().left - ( $( this ).width()  * 0.5 ) );
            var coordY = ( e.pageY - $( this ).offset().top  - ( $( this ).height() * 0.5 ) );
            alert( coordX.toFixed(1) + ' , ' + coordY.toFixed(1) );
        });
    });

但与坐标原点的常规 2D 平面不同，当我在第一个四分之一处单击具有正 X 和 Y 的某个位置时，我仍然得到其中一个为负。

如何修改此代码片段，使其类似于 X 和 Y 坐标的正常笛卡尔平面，并且原点位于中心？

提前致谢

Answer 1

试试这个:http://jsfiddle.net/V3xUV/

$( '#ClickBox' ).click( function(e)
{
    var coordX = ( e.pageX - $( this ).offset().left - ( $( this ).width()  * 0.5 ));
    var coordY = -( e.pageY - $( this ).offset().top  - ( $( this ).height() * 0.5 ));
    alert( coordX.toFixed(1) + ' , ' + coordY.toFixed(1) );
});