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

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

这基本上绘制了我的形状，并根据用户输入的行数、列数，绘制了一定数量的矩形，然后 space 将它们均匀地拉出（见图）。

然后我使用函数 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 毫无问题地存储在数据库中。

但是，在加载已保存的数据和 re-drawing 矩形时，我遇到了一个奇怪的问题，它会剪切其中一个结果，并在其中留下空白 space形状应该是（见图）。

注意左上角的空白点。我已经检查了每个 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.

            };

}
};

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

提前感谢您的任何回复，David。

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

然而新问题。当我尝试从数据库加载形状时，它们不在 canvas/paper 上应有的位置。关于从大小为 1920x900 的 canvas/paper 获取的坐标，是否有什么我忽略的地方导致我存储的坐标与我的 paper/canvas 上的坐标不匹配？

再次感谢您的帮助。

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

这是移动矩形后的数据库table 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;
}

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

Answer 2

好的，对于任何感兴趣的人，我已经弄清楚了，而且非常简单。我所要做的就是为 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);
};

感谢大家的帮助。

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

Drawing rects using Raphael,storing coords in database, retrieve the coords re-draw the shapes

javascript

php

json

canvas

raphael