Question

我正在尝试实时获取除鼠标指针以外的圆的坐标。

我写了获取鼠标指针坐标的代码，但除此之外，我无法获取圆的坐标。

这是我的代码。

        var item = document.querySelector("#moveItem");
        var itemRect = item.getBoundingClientRect();

        document.addEventListener("mousemove", followMouse, false);

        function followMouse(e) {
            var xPos = e.pageX - itemRect.width / 35;
            var yPos = e.pageY - itemRect.height / 35;

            console.log(xPos + " " + yPos);

            item.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
        
        window.onload = init;
function init() {
	if (window.Event) {
	document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
	document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) ;
	document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

body {
padding:0;
margin:0;
}
        #moveItem {
            width: 50px;
            height: 50px;
            background-color: #FF3333;
            position: absolute;
            border-radius: 50%;
        }

<input type="text" id="cursorX" size="3"> X-position of the Mouse
<input type="text" id="cursorY" size="3"> Y-position of the Mouse
<input type="text" id="circleX" size="3"> X-position of the Circle
<input type="text" id="circleY" size="3"> Y-position of the Circle

<div id="moveItem"></div>

Answer 1

使用services.Configure<CookiePolicyOptions>(options => { options.OnAppendCookie = (e) => { e.CookieOptions.Path = e.Context.Request.PathBase; }; ..... });获取圆的坐标。返回的值是该圆的document.getElementById('moveItem').getBoundingClientRect();，top，bottom和left测量值，因此计算圆的中心坐标就像找到每对平均值一样简单。

要更新您的right和circleX输入，请将以下代码添加到circleY函数中：

getCursorXY(e)

获取鼠标指针以外的圆的坐标

1 个答案: