Сканирование многомерного массива json_encoded

Question

Извините за форматирование - он все время давал мне «у вас код неформатированный» ошибки в этом вопросе. У меня есть код, который состоит из холста, который печатает изображение. Затем я отслеживаю координаты мыши пользователя, и если они соответствуют координатам, найденным в текстовом файле, я хочу запросить пользователя. Это веб-приложение, дополняющее программу C++ OpenCV, которая обнаруживает капли и координаты там, где они существуют. Текстовый файл находится в следующем формате: label x y.

001 101 305 

является линией для координат (101, 305) в сгустке 001. PHP читает каждую строку и взрывается в пространствах просто отлично.

Текстовый файл читается как так:

001 101 303 
001 101 304 
001 101 305 
001 101 306 
001 101 307 
001 101 308 
001 101 309 
001 101 310 
001 102 301 
001 102 302 

<script> // functions to make canvas and place PNG overlay image 

    <?php 
     $XYFile = fopen("cpp/textdump/coordinates/imagetesting.txt.txt","r") or die ("file reading error"); 
     $coordinates = array(); // create coordinates array 

     while (!feof($XYFile)) { // while not at last line of file 
      $uncatXY = fgets($XYFile); // read one line of file 
      $splitXY = explode(" ", $uncatXY); // create new array element when a space is present 
      $label = $splitXY[0]; // declare blob label 
      $x = $splitXY[1]; // declare x 
      $y = $splitXY[2]; // declare y 
      array_push($coordinates, $label, $x, $y); 
     } // push into coordinates array 

     fclose($XYFile); // close file 
    ?> 

    var js_array = <?php echo(json_encode($coordinates)); ?> // convert PHP array to javascript object notation format 
    // requires PHP 5.2 or higher, which I believe to be on the server. It's certainly on my localhost server. 
    console.log(js_array); // dev 


    $(document).ready(function() { 
     window.onload = function() { 
      var c = document.getElementById("solarCanvas"); 
      var ctx = c.getContext("2d"); 
      ctx.fillStyle = "#00FFFF"; // cyan fill 
      var img = document.getElementById("testimage"); 
      img.src = 'cpp/images/PNG/imagetesting.png'; //"cpp/images/" + date + ".png"; 
      ctx.drawImage(img, 0, 0); 

      c.addEventListener('click', function() { }, false); 

      // functions for color & coordinates on mouse movement/clicl 
      $('#solarCanvas').mousemove(function(e) { 
       var c = document.getElementById("solarCanvas"); 
       var ctx = c.getContext("2d"); // temp declaration bug fix -- can't find root cause, so redec 
       var pos = findPos(this); 
       var x = e.pageX - pos.x; 
       var y = e.pageY - pos.y; 
       var coord = "x=" + x + ", y=" +y; 
       var p = ctx.getImageData(x, y, 1, 1).data; 
       var hex = ("#" + 000000 + rgbToHex(p[0], p[1], p[2]).slice(-6)); 
       $('#status').html(coord + "<br>" + hex); 
       console.log(x + "," + y + "---" + coord + " at " + hex); 
      }); 

      $('#solarCanvas').click(function(e) { 
       var c = document.getElementById("solarCanvas"); 
       var ctx = c.getContext("2d"); 
       var pos = findPos(this); 
       var xNum = e.pageX - pos.x; 
       var yNum = e.pageY - pos.y; 
       var xStr = xNum.toString(); 
       var yStr = yNum.toString(); 

       for(var i = 0; i < js_array.length; i++) { 
        if(js_array[i] === xStr) { 
         return i; 
         console.log(i); 
         if(i > -1) { 
          alert("yahoo!"); 
         } 
        } 
       } 

       console.log(js_array);       
       console.log(xStr);         
       console.log(yStr);         
      }); 
     } 
    }); 

    // old architecutre 
    // mixed array_search (mixed $needle, array $haystack [, bool $strict = false ]); 
    // searches haystack for needle 
    // pseudocode 
    //if ((e.pageX - pos.x) exists in col 2 && (e.pageY-pos.y) is in same row in col 3) { 

</script> 

Я прошел через много версий этого кода, и я разместить то, что есть сейчас. На данный момент я строго работаю с координатой X. Как только он сработает, я добавлю в Y. [...] Я рассмотрел тот факт, что PHP explode & json_encode сохраняет строки, поэтому я сделал функцию .toString(), но это, казалось, не помогло вообще , Например, мой журнал консоли будет что-то вроде х/у/х поз в массиве/поз у в массиве

101 
305 
-1 
-1 

Answer 1

Вот небольшая переписывание кода.

Что я сделал:

1. Измененный свой CSV разборе разбить на строки 3 колонки, используя модель итератора для простоты
2. Изменено ваши JS, чтобы соответствовать рентгеновским COORDS к строке [1] и у -coords to row [2]
3. Не уверен, что другой код предназначен для успеха ... похоже, что вы все еще работаете над этим.

РНР код:

<?php 
    $file = file("cpp/textdump/coordinates/imagetesting.txt.txt""); 
    $coordinates = array(); 
    for ($line in $file) { 
     array_push($coordinates, explode(" ", $line); 
    } 
?> 
var coords = <?= json_encode($coordinates) ?>; 

JS:

$('#solarCanvas').click(function(e) { 
    var c = document.getElementById("solarCanvas"); 
    var ctx = c.getContext("2d"); 
    var pos = findPos(this); 
    var xNum = e.pageX - pos.x; 
    var yNum = e.pageY - pos.y; 
    var xStr = xNum.toString(); 
    var yStr = yNum.toString(); 

    for(var i = 0; i < coords.length; i++) { 
     if(coords[i][1] === xStr && coords[i][2] === yStr) { 
      return i; 
      console.log('coord found', coords[i]); 
     } 
    } 
    console.log(coords); 
    console.log(xStr);         
    console.log(yStr);         
});