2013-12-03 3 views
2

У меня есть сайт, на котором пользователи могут перемещать изображения в холсте Fabric.js. Я хочу иметь возможность воссоздать их «дизайн» на большом холсте, поэтому мой вопрос: какие разные способы воссоздать холст, используя переменные из оригинала?Как воссоздать холст Fabric.js?

Прямо сейчас, используя JSON.stringify(canvas);, чтобы получить данные, но это не идеальный вариант, так как мне нужно снова скопировать переменные, это выглядит так: type":"image","originX":"center","originY":"center","left":135,"top":259,". Любые предложения о том, как это сделать, или это JSON.stringify(canvas);, а затем скопировать все самые простые данные?

+0

_».. но его на самом деле не идеальный, так как я должен снова скопировать переменные переменные _ _ - что вы подразумеваете под этим? – kangax

+0

@kangax, когда вы не заняты редактированием f на F в каждом материале, почему бы не проверить ответы на свои вопросы? Просто скажите .. :-) – K3N

+0

@ KenFyrstenberg haha, я знаю, я знаю :) Было важно вникать в ваш ответ, но увязнуть с другими вещами. Надеюсь, сегодня! – kangax

ответ

4

Используйте метод canvas.toJSON() создать объект JSON объектов и свойств вашего первого холста, а затем загрузить этот объект JSON в новый холст, используя метод

canvas.loadFromJSON("your json object");.

Как только вы загрузили объект в свой холст с помощью вышеуказанного метода, вызовите canvas.renderAll();, и вы увидите, что новый холст содержит все объекты оригинала.

Вы можете по желанию выбрать, какие свойства хранить в объекте JSON, передавая массив имен свойств в toJSON() метод, документацию можно найти здесь:

http://fabricjs.com/docs/fabric.Canvas.html#toJSON

Смежные вопросы