如何确定我在哪个框中单击？

Question

First off i'm new to javascript and still learning its basics, i'm trying to determine in which box i clicked(canvas). 首先，我是javascript新手，并且仍在学习其基础知识，我试图确定我在哪个框中单击了（画布）。 My boxes are a list of dictionaries that look like this if we use console.log to visualize them, let's call that list labels : 我的盒子是一个字典列表，如果我们使用console.log可视化它们，则如下所示，我们将其称为列表labels ：

[
    {"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},
    {"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},
    {"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},
    {"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}
]

Here we can see we have 4 rectangles and their coordinates. 在这里，我们可以看到有4个矩形及其坐标。 The function i used to get mouse clicks is : 我用来获得鼠标点击的功能是：

canvas.addEventListener("contextmenu", getPosition, false);
function getPosition(event) {
  event.preventDefault();
  var x = event.x;
  var y = event.y;

  var canvas = document.getElementById("canvas");

  x -= canvas.offsetLeft;
  y -= canvas.offsetTop;

  console.log("x:" + x + " y:" + y);
}

The part where i'm struggling is to find out if where i clicked are inside any of the boxes and if the click is inside one i want the id. 我苦苦挣扎的部分是找出我单击的位置是否在任何框内，以及单击是否在我想要的ID内。

What i tried: 我试过的

I tried adding this after the console.log in the previous code snippet: 我尝试在之前的代码段中的console.log之后添加此代码：

for (i = 0,i < labels.length; i++) {
                if (x>labels[i].xMin) and (x<labels[i].xMax) and (y>labels[i].yMin) and (y<labels[i].yMax) {
                    log.console(labels[i].id)
                }
            }

but it didn't work 但这没用

Answer 1

The rects in Labels are all very far to the right, so probably you need to add the scroll position to the mouse position. 标签中的矩形都在最右边，因此可能需要将滚动位置添加到鼠标位置。

Made a working example (open the console to see the result): https://jsfiddle.net/dgw0sxu5/ 做了一个工作示例（打开控制台以查看结果）： https : //jsfiddle.net/dgw0sxu5/

<html>
    <head>
        <style>
            body{
                background: #000;
                margin: 0
            }
        </style>

        <script>
            //Some object which is used to return an id from a click
            //Added a fillStyle property for testing purposes
            var Labels = [
                {"id":"0","image":"1-0.png","name":"","xMax":"4956","xMin":"0","yMax":"50","yMin":"0","fillStyle":"pink"},
                {"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141","fillStyle":"red"},
                {"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141","fillStyle":"blue"},
                {"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145","fillStyle":"limegreen"},
                {"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145","fillStyle":"aqua"}
            ];

            //Initialisiing for the testcase
            window.onload = function(){
                //The canvas used for click events
                var tCanvas = document.body.appendChild(document.createElement('canvas'));
                tCanvas.width = 4956; //Highest xMax value from labels
                tCanvas.height = 157; //Highest yMax value from labels

                //The graphical object
                var tCTX = tCanvas.getContext('2d');

                //Drawing the background
                tCTX.fillStyle = '#fff';
                tCTX.fillRect(0, 0, tCanvas.width, tCanvas.height);

                //Drawing the rects for testing purposes
                //The rectangles are kinda far on the right side
                for(var i=0, j=Labels.length; i<j; i++){
                    tCTX.fillStyle = Labels[i].fillStyle;
                    tCTX.fillRect(+(Labels[i].xMin), +(Labels[i].yMin), +(Labels[i].xMax)-+(Labels[i].xMin), +(Labels[i].yMax)-+(Labels[i].yMin));
                };

                tCanvas.onclick = function(event){
                    var tX = event.clientX - this.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft), //X-Position of click in canvas
                        tY = event.clientY - this.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop), //Y-Position of click in canvas
                        tR = []; //All found id at that position (can be more in theory)

                    //Finding the Labels fitting the click to their bounds
                    for(var i=0, j=Labels.length; i<j; i++){
                        if(tX >= +(Labels[i].xMin) && tX <= +(Labels[i].xMax) && tY >= +(Labels[i].yMin) && +(tY) <= +(Labels[i].yMax)){
                            tR.push(Labels[i].id)
                        }
                    };

                    console.log(
                        'Following ids found at the position @x. @y.: '
                            .replace('@x.', tX)
                            .replace('@y.', tY),
                        tR.join(', ')
                    )
                }
            }
        </script>
    </head>

    <body></body>
</html>

Answer 2

First of all: what exactly did not work? 首先：到底什么没用？

var canvas = document.getElementById("canvas"); should be outside of your function to save performance at a second call. 应该在函数之外，以节省第二次调用的性能。

And getting coordinates is not complicated, but complex. 获取坐标并不复杂，但是很复杂。

There is a great resource on how to get the right ones: http://javascript.info/coordinates 关于如何获取正确的资源，有很多资源： http : //javascript.info/coordinates

Be sure about the offset measured relative to the parent element ( offsetParent and also your offsetLeft ), document upper left ( pageX ) or viewport upper left ( clientX ). 确保相对于父元素（ offsetParent以及您的offsetLeft ），文档左上角（ pageX ）或视口左上角（ clientX ）测量的偏移量。

Answer 3

Your logic seems to be correct, you just need to fix the syntax. 您的逻辑似乎是正确的，您只需要修复语法。

for (i = 0; i < labels.length; i++) {
    if ((x>labels[i].xMin) && (x<labels[i].xMax) && (y>labels[i].yMin) && (y<labels[i].yMax)) {
        console.log(labels[i].id)
    }
}

Here is a complete example: 这是一个完整的示例：

labels = [
          {"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},
          {"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},
          {"id":"3","image":"1-0.png","name":"","xMax":"4923","xMin":"4903","yMax":"156","yMin":"145"},
          {"id":"4","image":"1-0.png","name":"","xMax":"4956","xMin":"4931","yMax":"156","yMin":"145"}
]

var canvas = document.getElementById("canvas");
canvas.addEventListener("contextmenu", getPosition, false);
function getPosition(event) {
  event.preventDefault();

  var x = event.clientX;
  var y = event.clientY;

  var label = labels.find(function(label){
     return (x>label.xMin) && (x<label.xMax) && (y>label.yMin) && (y<label.yMax)
  });

  if(label){
     console.log("clicked label", label.id);
  }else{
     console.log("no label was clicked");
  }
}

如何确定我在哪个框中单击？

问题描述

3 个解决方案

解决方案1
2 2018-05-04 14:24:40

解决方案2
0 2018-05-04 11:27:41

解决方案3
0 2018-05-04 11:32:13

如何确定我在哪个框中单击？

问题描述

3 个解决方案

解决方案1 2 2018-05-04 14:24:40

解决方案2 0 2018-05-04 11:27:41

解决方案3 0 2018-05-04 11:32:13

解决方案1
2 2018-05-04 14:24:40

解决方案2
0 2018-05-04 11:27:41

解决方案3
0 2018-05-04 11:32:13