Как сохранить расположение перетаскиваемых фигур на холсте?

Question

Я использую холст для создания фигур. Эти формы являются перетаскиваемыми. Как сохранить расположение фигур, чтобы, возвращаясь на страницу, фигуры находились в том же месте, куда я их перетащил?

Answer 1

LocalStorage

Наиболее простым решением является использование веб-хранилища (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();

Если браузер изначально поддерживает холст, он, скорее всего, также имеет веб-хранилище.

Answer 2

Вы можете сохранить свои данные на сервере в некотором постоянном хранилище (не сеанс, потому что это временно). База данных или файл - хорошее начало.

Кроме того, поскольку вы используете HTML5, вы можете использовать локальное постоянное хранилище HTML5 для сохранения ваших фигур.

Answer 3

В зависимости от вашего варианта использования вы можете сохранить метаданные формы в файле cookie на стороне клиента, в переменной сеанса на стороне сервера. Или сохраните его в базе данных на сервере.

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

И вот песочница для перетаскивания взаимодействия и кода:

Как только вы отключите это взаимодействие и отправите данные о местоположении через AJAX в бэкэнд, вам, очевидно, потребуется обновить бэкэнд для обработки отправляемых данных и обновить запись, в которой хранится положение объекта.

Надеюсь, это поможет.

JP