Question

请原谅格式 - 它一直给我＆＃34;你的代码没有格式化＃34;这个问题的错误。我有一个代码，包含一个打印图像的画布。然后我跟踪用户的鼠标坐标，如果它们与文本文件中找到的坐标匹配，我想提示用户。这是一个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爆炸＆amp; json_encode正在保存字符串，所以我做了一个.toString（）函数，但这似乎没有任何帮助。例如，我的控制台日志就像x / y / pos of x in array / pos of y in array

Answer 1

这里略微改写了您的代码。

我做了什么：

将CSV解析更改为拆分为3列的行，为简单起见使用迭代器模型
更改了您的JS以匹配x-coords到row [1]和y-coords到row [2]
不确定其他代码在成功时的目的是什么......看起来你还在努力解决这个问题。

PHP代码：

funTaylor m x

JS：

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

扫描多维json_encoded数组

1 个答案: