1

请原谅格式 - 在这个问题中它一直给我“你有未格式化的代码”错误。我有一个代码，它由一个打印图像的画布组成。然后我跟踪用户的鼠标坐标，如果它们匹配在文本文件中找到的坐标，我想提示用户。这是一个 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/pos of x in array/pos of y in array

101
305
-1
-1
4

1 回答 1

0

这是对您的代码的轻微重写。

我做了什么：

  1. 为简单起见，使用迭代器模型将 CSV 解析更改为分成 3 列的行
  2. 更改了您的 JS 以将 x-coords 匹配到 row[1] 并将 y-coords 匹配到 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);                                 
});
于 2015-07-29T22:51:18.100 回答