グリッド上にjavascriptを使用してグリッドを重ねると、グリッド座標が得られるようになる

グリッド上にグリッドをオーバーレイし、そのグリッド上をクリックしてグリッド座標を取得できるようにしようとしていますクリックした私は、次のstackoverflow質問からのコードで作業しています：グリッド上にjavascriptを使用してグリッドを重ねると、グリッド座標が得られるようになる

イメージ上にグリッドオーバーレイを作成しています。ここで 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>

この例では10

</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>

画像はグリッドボックスがクリックされたとき、グリッドボックスの色が変わり、私はボックスの座標を有することができるようにしたいです。どんな助けも素晴らしいだろう。ありがとう

出典

2011-01-03 Alos

あなただけの画像でクリックが起こった場所を知りたいですか？グリッドはどういう意味ですか？ – Hemlock

重要な場合は、グリッドは定期的ですか？すべての10x10セル。 – Hemlock

こんにちはヘムロック、グリッドのサイズは48 x 32です。 – Alos

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

出典

2011-01-03 21:34:04 Hemlock

Hi Hemlock私は1536ウェルプレートで作業しており、各ウェルはグリッド座標に対応しているためグリッドが必要です。人々は、井戸をクリックする、すなわち成長しなかった井戸に対応するグリッドボックスをクリックする。私はそれらの座標をとり、そのデータをデータベースに保存します。ありがとう – Alos

@アラモこれはあなたのために十分ですか、何か不足していますか？ – Hemlock

@Hemlockあなたが提供したコードを追加しようとしましたが、そのすべてを含めるように質問を更新しましたが、何らかの理由でボックスをクリックしても警告が表示されません。あなたが間違って提供したソリューションを実装しようとしていると思います。私が間違っていることを知っていますか？ありがとう – Alos

グリッド上にjavascriptを使用してグリッドを重ねると、グリッド座標が得られるようになる

答えて

関連する問題