Лучший подход для (рисования и хранения) плана?

Question

У меня есть проект, который нуждается в базовом плане для выставки, которая будет храниться в базе данных.

Я думаю, что буду использовать холст HTML5 и написать код для базового инструмента рисования для клиента (я не вижу каких-либо библиотек, в частности, с этим), но this thread был полезен.

Я передам данные обратно на php через jquery (возможно, используя бит localstorage, чтобы ускорить работу).

Вопрос: Должен ли я хранить «инструкции» для воссоздания плана пола в качестве инструкций по рисованию холста или мне лучше всего пойти с идеей создания большой сетки с каждой ячейкой сетки, которой назначена другая роль (коридор, выставочный стенд, пожарный выход)?

Или мой подход совсем не так?

Answer 1

IMO -

Сохранение определений формы, а не инструкций. Определите формы в зависимости от ваших потребностей, возможно, вам нужна форма круга, форма прямоугольника, форма многоугольника и т. Д. Определите их как объекты. У вас есть инструмент для каждой фигуры. Добавление свойств к таким объектам, как цвета, толщина линии и т. Д.

function Rectangle(x, y, width, height) { 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
} 

(литералы в порядке тоже).

Сохраните фигуры в массиве. Если вы хотите поддерживать слои, используйте для этого под-массивы (или двумерные массивы).

var r1 = new Rectangle(x, y, w, h); 
var r2 = new Rectangle(x, y, w, h); 
var shapes = [r1, r2]; // shapes.push(r1, r2); 

Если ваши объекты являются простыми (то есть. Не встраивание методы/функции), вы можете сериализовать их и отправлять их в виде JSON на сервер и обратно, не меняя их (или, например, использовать LocalStorage в качестве временного хранения между сессиями) , Использование векторов позволяет масштабировать ваши рисунки до любого размера, а также экспортировать/импортировать ваши данные в САПР позже.

// to server 
var json = JSON.stringify(shapes); 

// from server 
shapes = JSON.parse(dataFromServer); 
redrawShapes(); // something to render the shapes 

Answer 2

Вы также можете сделать что-то подобное тому, что мы сделали для конференции TelerikNEXT - https://www.nativescript.org/blog/add-floor-plans-in-your-nativescript-application-with-officernd-api