如何重新计算相对坐标? [英] How can I recalculate relative coordinates?

问题描述

我有一个 div 块:

在这个带有 SVG 圆圈的块内有一个 SVG 路径.当我点击时，我会得到 id="container" 的相对坐标.左上角是 0,0.

SVG 元素始终是容器的全宽、高度.但是 SVG 有自己的视口.

如何将 SVG 圆 (x,y) 的所有点重新计算为 #container 的相对坐标?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px"><circle cx="100" cy="100" r="10" fill="#4285f4"></circle></svg>

我需要知道每个圆相对于父div的相对坐标.

JavaScript 点击是:

document.getElementById('container').onclick = function clickEvent(e) {var rect = e.target.getBoundingClientRect();var x = e.clientX - rect.left;//x 在元素中的位置.var y = e.clientY - rect.top;//y 在元素中的位置.console.log("Left? : " + x + "; Top? : " + y + ".");}

我的尝试:https://jsfiddle.net/3g8un5w1/5/

即使通过 css 缩放，我也希望能够在画布上的圆圈位置和鼠标指针位置之间进行转换.

解决方案

也许只是将 id 添加到 circle 本身，然后读取它的 cx 和 cy 属性?如果 div padding 设置为 0，它应该是一个相对的 x 和 y.如果 padding 不同，则需要在 x 和 y 中添加这个 padding.

请注意，它是圆心的 x,y.检查下面的示例.首先它读取圆的x,y，然后(2秒后)将其设置为0,0.你可以看到，它是相对于 div 边框(red).

如果 div 填充是例如 10px，该值仍然是 100、100，但相对于容器，您必须添加 10，所以它应该返回 100 + padding, 100 + padding (110,110).而setter应该是110 - padding，110 - padding.

<div id="container" style="padding:0px; border:1px solid red;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px"><circle cx="100" cy="100" r="10" fill="#4285f4" id="circle"></circle></svg>

<脚本>console.log('之前:');console.log(document.getElementById('circle').getAttribute('cx') + ', '+ document.getElementById('circle').getAttribute('cy'));设置超时(功能(){console.log('设置为 0,0 后.');document.getElementById('circle').setAttribute('cx',0)document.getElementById('circle').setAttribute('cy',0)},2000);</script>

---

评论后编辑

检查带有比例示例的小提琴(基于您的评论小提琴):https://jsfiddle.net/r7ckLfhv/

I have a div block:

<div id="container"></div>

There is an SVG path inside this block with SVG circles. When I do click, I get relative coordinates to id="container". The top-left corner is 0,0.

The SVG element is always full width, height of container. But the SVG has its own view port.

How can I recalculate all points of the circle (x,y) of SVG to relative coordinates of #container?

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px">
    <circle cx="100" cy="100" r="10" fill="#4285f4"></circle>
  </svg>
</div>

I need to know the relative coordinates of each of circle, relative to the parent div.

JavaScript click is:

document.getElementById('container').onclick = function clickEvent(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top; //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
}

My attempt: https://jsfiddle.net/3g8un5w1/5/

I want to be able to transform in between position of the circle on canvas and mouse pointer position even when it's scaled via css.

解决方案

Maybe just add id to the circle itself, and then read it's cx and cy attribute? If the div padding is set to 0, it should be a relative x and y. If padding is different, you need to add this padding to the x and y.

Plase note that it's x,y of center of the circle. Check the example below. At first it reads the x,y of the circle, then (after 2 seconds) sets it to 0,0. You can see, that it is relative to the div border (red).

If the div padding would be for example 10px, that value would still be 100, 100, but relativly to the container, you would have to add that 10, so it should return 100 + padding, 100 + padding (110,110). And setter should be 110 - padding, 110 - padding.

<div id="container" style="padding:0px; border:1px solid red;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px">
    <circle cx="100" cy="100" r="10" fill="#4285f4" id="circle"></circle>
  </svg>
</div>

<script>
 console.log('Before:'); 
 console.log(document.getElementById('circle').getAttribute('cx') + ', '+ document.getElementById('circle').getAttribute('cy'));

 setTimeout(function(){
  console.log('After setting to 0,0.');  document.getElementById('circle').setAttribute('cx',0)
  document.getElementById('circle').setAttribute('cy',0)},2000);
</script>

---

EDIT AFTER COMMENT

Check the fiddle with scale example (based on your comment fiddle): https://jsfiddle.net/r7ckLfhv/

这篇关于如何重新计算相对坐标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！