个人中心
gpt4 book ai didi

javascript - 我如何确定我点击了哪个框？

转载 作者：行者123 更新时间：2023-12-01 02:05:08 25 4
gpt4 key购买 nike

首先，我是 javascript 新手，仍在学习其基础知识，我试图确定我单击了哪个框( Canvas )。我的盒子是一个字典列表，如果我们使用 console.log 来可视化它们，它看起来像这样，我们将该列表称为标签:

[
    {"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"}
]

在这里我们可以看到我们有 4 个矩形及其坐标。我用来获取鼠标点击的函数是:

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);
}

我正在努力的部分是查明我点击的位置是否在任何盒子内，以及点击是否在我想要的 id 内。

我尝试过的:

我尝试在前面的代码片段中的 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)
                }
            }

但是没有成功

最佳答案

标签中的矩形都离右侧很远，因此您可能需要将滚动位置添加到鼠标位置。

制作了一个工作示例(打开控制台查看结果): 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>

关于javascript - 我如何确定我点击了哪个框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50173610/

25 4 0
文章推荐： python - 如何在 CrateDB 中使用 python 执行批量插入？
文章推荐： javascript - 将所有 javascript 索引增加(或减少)一个数字
文章推荐： javascript - 如何删除通过 Highcharts 中的 Chart.renderer 添加的文本
文章推荐： javascript - 用于动态创建搜索结果的 Schema.org 标签？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com