如何在画布中保存可拖动形状的位置？

Question

我正在使用画布来制作形状。这些形状是可拖动的。如何保存形状的位置，以便当我返回到页面时，形状位于我将其拖动到的相同位置？

Answer 1

localStorage的

最简单的解决方案是使用Web Storage（localStorage / sessionStorage）。

为了完成这项工作，您可以使用序列化对象来存储形状信息，例如：

var myShapeStack = []; //all objects here

function myShape(x, y, width, height) {
    this.type = 'rectangle';
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    //...
    return this;
}

//...
//get the coords from drawing, then
var shape1 = new shape1(x, y, w, h);
myShapeStack.push(shape1);

现在您可以使用Web Storage存储整个堆栈：

localStorage.setItem('shapes', JSON.stringify(myShapeStack);

下次加载并初始化时：

myShapeStack = localStorage.getItem('shapes');
myShapeStack = (myShapeStack !== null) ? JSON.parse(myShapeStack) : [];

如果您以后想删除它：

localStorage.removeItem('shapes');

或蛮力一切：

localStorage.clear();

如果浏览器本身支持画布，那么它很可能也有Web存储。

Answer 2

根据您的使用情况，您可以将形状元数据存储在客户端的cookie中，位于服务器端的会话变量中。或者将其保存在服务器上的数据库中。

Answer 3

您可以将数据保存在服务器上的某个持久存储中（而非会话，因为这是暂时的）。数据库或文件是一个良好的开端。

或者，由于您使用的是HTML5，因此您可以使用HTML5的本地持久存储来保存您的形状。

Answer 4

jCanvas和数据库后端。

@ K3N给你一个很好的存储到localStorage。

以下是我们用于将拖动的对象存储到数据库的简单示例。

夫妻俩：

1. 我们正在使用 jCanvas 来抽象和清理与canvas的互动。这太不可思议了。它不仅提供了更好的界面，而且还为canvas提供了一些很棒的功能。

   这也意味着我们正在使用 jQuery 。

2. 我们使用Rails后端将位置存储到数据库中的记录中。

以下是实现此功能的基本代码：

$('canvas').drawRect({
  layer: true,
  name: 'myRect-1',
  draggable: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100,

  dragstop: function(layer) {      
    var path = '/objects/1/';

    var payload = { id: 1, x: layer.x, y: layer.y };

    $.post( path, { _method: 'PUT', payload } );
  }
});

here is the sandbox用于拖动互动和代码：



一旦你进行了这种交互并将位置数据通过AJAX发送到后端，你需要显然更新你的后端来处理发送的数据并更新存储对象位置的记录

希望有所帮助。

JP