使用拉斐尔拉伸拉伸，在数据库中存储坐标，检索坐标重新绘制形状

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

这基本上是平局我的形状取决于有多少行，用户输入栏，它绘制矩形和它们空间出来的量均匀（见图片） 。

然后我保存每个形状使用我的函数保存（X，Y，ID）被吸入。我通过喂食上面的moveRight变量和Y coord的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，看起来最后一个矩形被遗漏了，但是不知怎的，整个结构正在被移动，以便以这种方式显示。

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

负载（）由在屏幕截图按下按钮调用并调用此：

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. 

      }; 

} 
}; 

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

在此先感谢David的回复。

更新：非常感谢下面谁帮我解决了这个问题，但是我已经设法解决了关于缺少矩形的问题。我在我的sql语句中使用ORDER BY x，y而不是BY seat_ID。这个小改变现在显示所有存储的矩形。

然而，新问题。当我尝试从数据库中加载形状时，它们不在应该放在画布/纸上的位置。有没有什么我忽略了从我的画布/纸尺寸在1920x900取得的坐标，导致我存储的坐标与我的纸张/画布上的坐标不匹配？

再次，任何帮助在此赞赏。

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

这里是移动矩形SEAT_ID 25后的数据库表：

我觉得我得到这些新的坐标中的方式有​​问题。下面是我目前得到一个移动的形状的COORDS方式：

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

好的，对于任何感兴趣的人，我已经想通了，而且很简单。我所要做的只是为x和y创建一个变量，并将它们设置为this.getBBox（）。x和this.getBBox（）。y，它给出了每个元素左上角的x和y坐标。所以我编辑我的拖动功能如下：

var start = function() { 
    this.odx = 0; 
    this.ody = 0; 
    this.animate({ 
     "fill-opacity" : 0.2 
    }, 500); 
}, 
move = function (dx, dy) { 
    x = this.getBBox().x; 
    y = this.getBBox().y;  
    this.translate(dx - this.odx, dy - this.ody);  
    this.odx = dx; 
    this.ody = dy; 
}, 
up = function() { 
    this.animate({ 
     "fill-opacity" : 1 
    }, 500); 
    update(x,y,this.id); //use the bbox values for the update function. 
    alert(this.id); 
}; 

感谢您的帮助球员。

Answer 2

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

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

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