使用Raphael绘制rects，将coords存储在数据库中，检索coords重新绘制形状

Question

对于长标题感到抱歉，但这简直就是我的问题所在。 我目前正在使用以下内容绘制一个矩形：

for (var i = 0; i <= fixedrow; i++) {           
    for (var j = 0; j <= fixedcolumn; j++) {    

        var offseti = i;                        //An offset was needed to ensure each newly drawn rectangle places at the right spacing
        var moveDown = (i + 25 - offseti) * i;  //between eachother. 

        var offsetj = j;
        var moveRight = (j + 20 - offsetj) * j;

        rectangle = paper.rect(moveRight, moveDown, 15, 20).attr({      
            fill : "green"                                                                              
        });

这基本上绘制了我的形状，并根据用户输入的行数，列数，绘制了大量的矩形并将它们均匀分开（见图）。

然后我使用我的函数save（X，Y，ID）保存每个正在绘制的形状。我通过从上面输入moveRight变量获得每个形状的X坐标，并为Y坐标输入moveDown。这将转到保存函数，如下所示：

function save(xin, yin, idin) {
var id = idin;
var x = xin;
var y = yin;

$.ajax('save.php', {
    type : 'post',
    dataType : 'text',
    data : 'x=' + x + '&y=' + y + '&id=' + id,
    success : function(){}
})
};

X，Y和id存储在数据库中没问题。

然而，当涉及加载保存的数据并重新绘制矩形时，我遇到了一个奇怪的问题，它会切割其中一个结果，并留下一个空白区域应该是一个形状（见图）

注意左上角的空白点。我已经检查了每个ID，似乎最后一个矩形被遗漏了，但不知何故，整个结构被移动到一个以使它以这种方式显示。

我检索存储数据和绘制rects的代码如下：

按下屏幕截图中的按钮调用

load（）并调用：

function load() {   
        $.ajax('load.php', {
        type : 'GET',
        success : drawLoad 
    })  
};

加载脚本如下：

<?php
header ("Content-type: application/json");

$conn = new           PDO("mysql:host=****.****.co.uk;dbname=****;","****","****");

$results = $conn->query("SELECT * FROM seats_table ORDER BY y,x");
$row = $results->fetch();
$data= array();
while ($row = $results->fetch(PDO::FETCH_ASSOC))
{
    $data[] = $row;
}    
echo json_encode($data);

?>

我使用返回的Json的方式是：

function drawLoad(data) {
//if (paper == null) // Checks that the canvas/paper hasn't already been created (Decides whether to add to current paper or make new one).
    paper = Raphael("content", 1920, 900); // Creates the paper if one hasn't already been done so.

var start = function () {
    this.odx = 0;
    this.ody = 0;
    this.animate({
        "fill-opacity" : 0.2
    }, 500);
},
move = function (dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
},
up = function () {
    this.animate({
        "fill-opacity" : 1
    }, 500);
    update(this.odx, this.ody, this.id);
    alert(this.id);
};

for (var i = 0; i < data.length; i++) {
    var ID = data[i].ID;
    var x = data[i].x;
    var y = data[i].y;
    var isBooked = data[i].isBooked;
    var price = data[i].price;
    var seat_ID = data[i].seat_ID;

    rectangle = paper.rect(x, y, 15, 20).attr({fill : "green"}); 
    rectangle.drag(move, start, up);
    //alert("ID = " + ID + " X = " + x + " Y = " + y);
    var clickHandler = function () {                //This clickHandler will detect when a user double clicks on a seat icon.

            };

}
};

有谁可以指出这个问题可能是什么原因？请记住，我已经删除了任何验证以及不减少帖子中代码内容的内容，并希望使其更具可读性。

预先感谢任何回复，大卫。

更新：非常感谢下面帮助我解决此问题的所有人，但我已成功解决了有关丢失矩形的问题。我在我的sql语句中使用ORDER BY x，y而不是BY seat_ID。这个小改动现在显示所有存储的矩形。

然而，

新问题。当我尝试从数据库加载形状时，它们不应该在画布/纸上。关于从1920x900尺寸的帆布/纸张中取出的坐标是否存在我忽略的问题，导致我存储的坐标与纸张/画布上的坐标不匹配？

同样，任何帮助都在这里受到赞赏。

下面的屏幕截图显示我只需添加25个矩形并将右下角移动到新位置。你可以看到url正在通过id，x和y coord。

这是移动矩形seat_ID 25之后的数据库表：

我认为我获得这些新坐标的方式就是问题所在。以下是我目前获得移动形状的坐标的方法：

var start = function () {
    this.odx = 0;
    this.ody = 0;
    this.animate({
        "fill-opacity" : 0.2
    }, 500);        
},
move = function (dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
},
up = function () {
    this.animate({
        "fill-opacity" : 1
    }, 500);
    update(this.odx, this.ody, this.id);
    alert(this.id);
};

更新功能与保存功能基本相同，并且似乎正在工作，因为它正在传递所有变量并将它们存储在数据库中，这使我现在认为我在尝试时遇到了明显错误获得新移动的形状坐标。

有什么想法吗？

编辑：刚刚意识到我从this.odx和this.ody得到的值实际上是起始坐标和结尾之间的差异，而不是实际的结束坐标。我需要找出从这些信息中得出最终坐标的最佳方法。

Answer 1

这看起来像是因为在主循环之前没有使用初始提取。

$row = $results->fetch();  // not needed
$data = array();
while ($row = $results->fetch(PDO::FETCH_ASSOC))
{
    $data[] = $row;
}

第一行可以被丢弃，因为你希望它们全部聚集在循环中。