3

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

4

4 回答 4

2

本地存储

最简单的解决方案是使用 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 存储。

于 2013-06-21T20:35:24.757 回答
0

您可以将数据保存在服务器上的某个持久存储中（不是会话，因为那是临时的）。数据库或文件是一个好的开始。

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

于 2013-06-21T20:13:47.790 回答
0

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

于 2013-06-21T20:04:11.773 回答
0

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

这是拖动交互和代码的沙箱：

三盒

一旦您完成此交互并通过 AJAX 将位置数据发送到后端，您显然需要更新后端以处理正在发送的数据并更新存储对象位置的记录。

希望有帮助。

J.P

于 2015-06-10T20:09:15.740 回答