我如何使用顶部和左CSS属性在图像上以非常精确的像素定位

发布于 2025-02-08 08:03:25 字数 821 浏览 2 评论 0原文

我想在图像单击时以特定像素显示一个点。我通过以％给出顶部和左值来显示它。发生的事情是点击点内部存在另一个像素时，点不会移动。当单击室外时，它正在移动。我不明白为什么会发生这种情况。

可能是因为每个像素的顶部和左值的变化很小。

我已经更新了用于在圆圈中显示DOT的CSS，

.hObiiS{
  border: solid 1px #303030 !important; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none !important; 
  height: 9px !important; 
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  width: 9px !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hObiiS::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 1px; 
    background-color: rgb(224, 1, 1);
    border-radius: 50%;
}

<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>

有人可以提供每个像素的DOT的解决方案吗？

原文

I want to display a dot at specific pixel on image click. I'm displaying it by giving top and left values in %. What happening is the dot isn't moving when clicked another pixel present inside the dot.
When click outside then it is moving. I don't understand why this is happening.

May be it is because there is very small change in top and left values for each pixel.

I've updated CSS for displaying dot within the circle

.hObiiS{
  border: solid 1px #303030 !important; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none !important; 
  height: 9px !important; 
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  width: 9px !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hObiiS::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 1px; 
    background-color: rgb(224, 1, 1);
    border-radius: 50%;
}

<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>

Can someone please provide solution to move dot per pixel ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦爱 2025-02-15 08:03:25

这是您的问题解决方案。

let container  = document.querySelector('img');
let dot = document.getElementById('dot');

document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
  
  var parentPosition = getPosition(container);
    var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
     
    dot.style.left = xPosition + "px";
    dot.style.top = yPosition + "px";
}
});






// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

.container {
  position: relative;
  cursor: "crosshair";
}
#dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: red;
  transform: translate(100, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
    <span id="dot" />
  </div>
</body>
</html>

codepen> codepen

您的鼠标单击位置（e.clientx and e.clients）是相对的在浏览器的左上角，这就是为什么您的点击位置不准确的原因。您可以研究本文中的详细信息。
移动元素

Here is your problem solution.

let container  = document.querySelector('img');
let dot = document.getElementById('dot');

document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
  
  var parentPosition = getPosition(container);
    var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
     
    dot.style.left = xPosition + "px";
    dot.style.top = yPosition + "px";
}
});






// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

.container {
  position: relative;
  cursor: "crosshair";
}
#dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: red;
  transform: translate(100, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
    <span id="dot" />
  </div>
</body>
</html>

Codepen

Your mouse click position (e.clientX and e.clientY) is relative to your browser's top-left corner that's why your click position is not accurate. You can study the details explanation in this article.
Move Element to Click Position

回复收藏 0 原文

好久不见√ 2025-02-15 08:03:25

您需要阻止点停止单击到图像。

您可以为此使用指针事件。

这是一个简单的例子：

.container {
  position relative;
  display: inline-block;
  width: 30vmin;
  height: 30vmin;
}

img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot {
  background: red;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
  pointer-events: none;
}

<div class="container"><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
  <div class="dot"></div>
</div>

You need to stop the dot from stopping the click going through to the image.

You can use pointer-events for that.

Here's a simple example:

.container {
  position relative;
  display: inline-block;
  width: 30vmin;
  height: 30vmin;
}

img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot {
  background: red;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
  pointer-events: none;
}

<div class="container"><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
  <div class="dot"></div>
</div>

回复收藏 0 原文

~没有更多了~

关于作者

旧时模样

暂无简介

文章

29 人气

关注发私信

友情链接

文江博客

我如何使用顶部和左CSS属性在图像上以非常精确的像素定位

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

我如何使用顶部和左CSS属性在图像上以非常精确的像素定位

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。