Question

所以我试图在地图中识别点，我通过点击她并将控制台中的输出分别得到该点的X，Y分别为我的地图坐标来做到这一点。我们都知道Y轴不是我们习惯的数学课，实际上是从左上角开始。我一直在谷歌上搜索几个小时，但是我无法找到一种方法来反转Y轴，以便从左下角开始。

<script>
    width = 14990/5,
    height = 15100/5,
    bg = "https://s3-us-west-1.amazonaws.com/riot-developer-portal/docs/map11.png";


svg = d3.select("#map").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "yossi");

svg.append('image')
    .attr('xlink:href', bg)
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', width)
    .attr('height', height);

var yossi = document.querySelector('#yossi');

// Get point in global SVG space
function cursorPoint(evt){
  pt = yossi.createSVGPoint();
  pt.x = evt.clientX*5-120; pt.y = evt.clientY*5-120;
  return pt.matrixTransform(yossi.getScreenCTM());
}

yossi.addEventListener('click',function(evt){
  var loc = cursorPoint(evt);
  console.log(loc.x +',' + loc.y);
  // Use loc.x and loc.y here
},false);
</script>

这是我的javascript文件，请帮忙:)。

Answer 1

要将SVG坐标系的y位置反转为更传统的笛卡尔系统（y从下到上逐渐增长），只需使用这个简单的数学运算：

var y = height - yPosition

yPosition是使用SVG坐标系的位置，其中y从上到下增长。

以下是使用d3.mouse：

的基本演示

＆＃13;

width = 300, height = 100;

svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

svg.on('mousemove', function() {
  var y = height - d3.mouse(this)[1];
  console.log("y position is: " + y);
});

＆＃13;

.as-console-wrapper { max-height: 20% !important;}

svg {
  border: 1px solid black;
  background-color: lavender;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

在控制台命令

1 个答案: