javascript — Рисование ректов с использованием Raphael, сохранение координат в базе данных, получение координат, повторное рисование фигур.

извините за длинное название, но это в значительной степени ставит мою проблему в двух словах.
В настоящее время я рисую прямоугольник, используя следующее:

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). Я получаю координаты X каждой фигуры, вводя переменную moveRight сверху и moveDown для координаты Y. Это проходит через функцию сохранения, которая выглядит следующим образом:

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 сохраняются в базе данных без проблем.

Однако, когда дело доходит до загрузки сохраненных данных и повторного рисования прямоугольников, у меня возникает странная проблема, когда он обрезает один из результатов и оставляет пустое место, где должна быть форма (см. Изображение).

Обратите внимание на пустое место в левом верхнем углу. Я проверил каждый идентификатор, и кажется, что последний прямоугольник пропущен, но каким-то образом вся структура смещается по одному, чтобы он отображался таким образом.

Мой код для извлечения сохраненных данных и составления протоколов выглядит следующим образом:

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.

};

}
};

Кто-нибудь может указать, что может быть причиной этой проблемы? Пожалуйста, имейте в виду, что я удалил все проверки и что бы не уменьшить содержание кода в посте и, надеюсь, сделать его немного более читабельным.

Заранее спасибо за любые ответы, Дэвид.

ОБНОВИТЬ: Спасибо всем ниже, кто помог мне с этой проблемой, но мне удалось решить проблему с отсутствующим прямоугольником. Я использовал ORDER BY x, y в своем выражении sql вместо BY seat_ID. Это небольшое изменение теперь отображает все сохраненные прямоугольники.

Новая проблема однако. Когда я пытаюсь загрузить фигуры из базы данных, они находятся не там, где должны быть на холсте / бумаге. Есть ли что-то, что я пропускаю из-за координат, взятых с моего холста / бумаги размером 1920×900, что приводит к тому, что координаты, которые я храню, не совпадают с координатами на моей бумаге / холсте?

Опять же, любая помощь приветствуется в этом.

На скриншоте ниже показано, как я просто добавляю 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, на самом деле представляют собой разницу между начальными и конечными координатами, а не фактическими конечными координатами. Мне нужно выяснить, как лучше определить окончательные координаты на основе этой информации.

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

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