javascript - 扫描多维json编码数组

Question

请原谅格式设置——在这个问题中它一直给我“你的代码未格式化”错误。我有一个由打印图像的 Canvas 组成的代码。然后，我跟踪用户的鼠标坐标，如果它们与文本文件中找到的坐标匹配，我想提示用户。这是一个网络应用程序，用于补充 C++ OpenCV 程序，用于检测 Blob 及其存在的坐标。文本文件采用以下格式:label x y。

001 101 305 

是 blob 001 中坐标 (101, 305) 的行。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() 函数，但这似乎根本没有帮助。例如，我的控制台日志类似于 x/y/数组中 x 的位置/数组中 y 的位置

101
305
-1
-1

Answer 1

这里稍微重写了您的代码。

我做了什么:

1. 为了简单起见，使用迭代器模型将 CSV 解析更改为分成 3 列的行
2. 更改了 JS，将 x 坐标与 row[1] 相匹配，y 坐标与 row[2] 相匹配
3. 不确定其他代码在成功后会执行什么操作...看来您仍在研究此问题。

PHP 代码:

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