javascript - 扫描多维json_encoded数组

请问格式化-这个问题一直给我“您的代码未格式化”错误。我有一个由打印图像的画布组成的代码。然后，我跟踪用户的鼠标坐标，如果它们与文本文件中找到的坐标匹配，我想提示用户。这是一个Web应用程序，是对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爆炸＆json_encode正在保存字符串的事实，所以我做了一个.toString（）函数，但这似乎根本没有帮助。例如，我的控制台日志将类似于x / y /数组中x的位置/数组中y的位置

101
305
-1
-1

最佳答案

这是您的代码的略微重写。

我做了什么：


为简化起见，使用迭代器模型将CSV解析更改为分为3列的行
更改了JS，以将x坐标与row [1]和y坐标与row [2]匹配
不确定其他代码在成功中打算做什么……看起来您仍在努力。


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