个人中心
gpt4 book ai didi

javascript - 使用javascript在图像上覆盖网格，需要帮助获取网格坐标

转载 作者：太空宇宙 更新时间：2023-11-04 05:27:20 24 4
gpt4 key购买 nike

我正在尝试在图像上叠加一个网格，然后让用户单击该网格并从用户单击的框中获取网格坐标。我一直在处理来自以下 stackoverflow 问题的代码:

在图像上创建网格叠加层。 link text

这是我目前的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  </script>
  <script type="text/javascript"> var SetGrid = function(el, sz, nr, nc){

        //get number of rows/columns according to the 'grid' size
        //numcols = el.getSize().x/sz;
        //numrows  = el.getSize().y/sz;
        numcols = 48;
        numrows = 32;
        //create table element for injecting cols/rows
        var gridTable = new Element('table', {
            'id' : 'gridTable',
            'styles' : {
                'width' : el.getSize().x,
                'height' : el.getSize().y,
                'top' : el.getCoordinates().top,
                'left' : el.getCoordinates().left
            }
        });

        //inject rows/cols into gridTable
        for (row = 1; row<=numrows; row++){
            thisRow = new Element('tr', {
                'id' : row,
                'class' : 'gridRow'
            });
            for(col = 1; col<=numcols; col++){
                thisCol = new Element('td', {
                    'id' : col,
                    'class' : 'gridCol0'
                });

                //each cell gets down/up over event... down starts dragging|up stops|over draws area if down was fired
                thisCol.addEvents({
                    'mousedown' : function(){
                        dragFlag = true;
                        startRow = this.getParent().get('id');
                        startCol = this.get('id');
                    },
                    'mouseup' : function(){
                        dragFlag = false;
                    },
                    'mouseover' : function(){
                        if (dragFlag==true){
                            this.set('class', 'gridCol'+$$('#lvlSelect .on').get('value'));
                        }
                    },
                    'click' : function(){
                        //this.set('class', 'gridCol'+$$('#lvlSelect .on').get('id').substr(3, 1) );
                        str = $$('#lvlSelect .on').get('id');
                        alert(str.substr(2, 3)); 
                    }
                });
                thisCol.inject(thisRow, 'bottom');
            };
            thisRow.inject(gridTable, 'bottom');
        };
        gridTable.inject(el.getParent());
 }

 //sens level selector func
 var SetSensitivitySelector = function(el, sz, nr, nc){
    $$('#lvlSelect ul li').each(function(el){
        el.addEvents({
            'click' : function(){
                $$('#lvlSelect ul li').set('class', '');
                this.set('class', 'on');
            },
            'mouseover' : function(){
                el.setStyle('cursor','pointer');
            },
            'mouseout' : function(){
                el.setStyle('cursor',''); 
            }
        });
    });
 }

 //execute
 window.addEvent('load', function(){
    SetGrid($('imagetomap'), 32);
    SetSensitivitySelector();
 });

 var gridSize = { 
 x: 48, y: 32
};

var img = document.getElementById('imagetomap');
    img.onclick = function(e) {
   if (!e) e = window.event;
    alert(Math.floor(e.offsetX/ gridSize.x) + ', ' + Math.floor(e.offsetY /         
    gridSize.y));
 }

</script>
<style>
    #imagetomapdiv { float:left; display: block; }
    #gridTable { border:1px solid red; border-collapse:collapse; position:absolute; z-index:5; }
    #gridTable td { opacity:0.2; filter:alpha(opacity=20); }
    #gridTable .gridCol0 { border:1px solid gray; background-color: none;   }
    #gridTable .gridCol1 { border:1px solid gray; background-color: green;  }
    #gridTable .gridCol2 { border:1px solid gray; background-color: blue;   }
    #gridTable .gridCol3 { border:1px solid gray; background-color: yellow; }
    #gridTable .gridCol4 { border:1px solid gray; background-color: orange; }
    #gridTable .gridCol5 { border:1px solid gray; background-color: red;    }
    #lvlSelect ul {float: left; display:block; position:relative; margin-left: 20px; padding: 10px; }
    #lvlSelect ul li { width:40px; text-align:center; display:block; border:1px solid black; position:relative; padding: 10px; list-style:none; opacity:0.2; filter:alpha(opacity=20); }
    #lvlSelect ul li.on { opacity:1; filter:alpha(opacity=100); }
    #lvlSelect ul #li0  { background-color: none;   }
    #lvlSelect ul #li1  { background-color: green;  }
    #lvlSelect ul #li2  { background-color: blue;   }
    #lvlSelect ul #li3  { background-color: yellow; }
    #lvlSelect ul #li4  { background-color: orange; }
    #lvlSelect ul #li5  { background-color: red;    }
</style>

</div>
<div id="lvlSelect">
    <ul>
        <li value="0" id="li0">0</li>
        <li value="1" id="li1">1</li>
        <li value="2" id="li2">2</li>
        <li value="3" id="li3">3</li>
        <li value="4" id="li4">4</li>
        <li value="5" id="li5" class="on">5</li>
    </ul>
</div>

在此示例中，单击图像时网格框会更改颜色，但我希望能够获得框的坐标。任何帮助都会很棒。谢谢

最佳答案

Mootools 解决方案在添加的 gridTable 上使用点击处理程序并计算位置。

function SetGrid(el) {
  var size = el.getSize();
  var coord = el.getCoordinates();

  var gridTable = new Element('table', {
    'id' : 'gridTable',
    'styles' : {
      'position': 'absolute',
        'width' : size.x,
        'height' : size.y,
        'top' : coord.top,
        'left' : coord.left
    }
  });

  var numcols = 48;
  var numrows = 32;
  var cellSize = {
    width: size.x / numcols,
    height: size.y / numrows
  }

  for (var row = 1; row<=numrows; row++){
      thisRow = new Element('tr', {
          'id' : row,
          'class' : 'gridRow'
      });
      for(var col = 1; col<=numcols; col++){
          thisCol = new Element('td', {
              'id' : col,
              'title': row + ' x ' + col,
              'class' : 'gridCol0'
          });
          thisCol.inject(thisRow, 'bottom');
      };
      thisRow.inject(gridTable, 'bottom');
  }

  gridTable.addEvents({
    // Add the click event to the gridTable
    click: function(e) {
      // Do something with the grid position.
      alert(Math.floor((e.client.x - coord.left) / cellSize.width)
            + ', ' + Math.floor((e.client.y - coord.top)/ cellSize.height));
    }
  });

  gridTable.inject(el.getParent());
}

JSBin 演示: http://jsbin.com/ajava4/12

关于javascript - 使用javascript在图像上覆盖网格，需要帮助获取网格坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4587761/

24 4 0
文章推荐： python - 在 Windows 64 位 Anaconda 安装上安装 pymc3 的问题
文章推荐： c - 从二进制文件中读取 4 字节日期(大端)
文章推荐： linux - 如何更改linux gcc版本
文章推荐： python - 如何删除字符串的日期时间部分？
太空宇宙
个人简介

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

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