使用拉斐爾拉伸拉伸，在數據庫中存儲座標，檢索座標重新繪製形狀

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

第一行可以被丟棄，因爲你希望它們都聚集在循環中。