javascript - 使用Raphael绘制矩形，将坐标存储在数据库中，检索坐标重新绘制形状

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 变量并为 Y 坐标输入 moveDown 来获取每个形状的 X 坐标。这会传递到保存函数，如下所示:

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，似乎最后一个矩形被遗漏了，但不知何故整个结构正在跨一个矩形移动以使其以这种方式显示。

我用于检索存储的数据并绘制矩形的代码如下:

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。这个小更改现在显示所有存储的矩形。

但是新问题。当我尝试从数据库加载形状时，它们不在 Canvas /纸张上应有的位置。关于从尺寸为 1920x900 的 Canvas /纸张中获取的坐标，是否存在一些我忽略的内容，导致我存储的坐标与纸张/ Canvas 上的坐标不匹配？

再次感谢您的帮助。

下面的屏幕截图显示我只添加了 25 个矩形并将右下角的矩形移动到新位置。您可以看到 url 传递了 id、x 和 y 坐标。

这是移动矩形 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;
}

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