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

【问题标题】：Drawing rects using Raphael,storing coords in database, retrieve the coords re-draw the shapes使用 Raphael 绘制矩形，将坐标存储在数据库中，检索坐标重新绘制形状
【发布时间】：2015-04-29 19:05:00
【问题描述】：

对不起，标题太长了，但这几乎可以概括我的问题。我目前正在使用以下方法绘制一个矩形：

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

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

再次感谢任何帮助。

下面的屏幕截图显示我只是添加了 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 得到的值实际上是起始坐标和结尾之间的差异，而不是实际的结束坐标。我需要找出从这些信息中计算出最终坐标的最佳方法。

【问题讨论】：

在drawLoad 的for (var i = 0; i < data.length; i++) { 行之前，您能否console.log(drawLoad.length 并检查它确实是25？
抱歉回复晚了，有网络问题。我刚刚按照你的要求做了，但是控制台似乎根本没有使用 console.log(drawLoad.length);
抱歉，变量是data 不是drawLoad。
这条线对吗，$row = $results->fetch(); （你有两次，一次在循环之前，一次作为循环的一部分）。你不是取一行，然后在循环之前什么都不做吗？
@JoeFrambach 是的，你是对的，我应该自己发现这种类型。它现在输出数字 24，所以只有一个短。然而，数据库确实包含 25 条记录。

标签： javascript php json canvas raphael

【解决方案1】：

这看起来是因为在主循环之前有一个未使用的初始提取。

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

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

【讨论】：

【解决方案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);
};

感谢大家的帮助。

【讨论】：