2016-01-19 2 views
0

Я использую FabricJS для создания полноэкранного холста и сохранения изменений на серверах. Перед загрузкой я изменяю размер фона фона &, чтобы на каждой загрузке страницы холст помещался внутри окна пользователя.Объекты FabricJS не относятся к размеру холста

canvas.setHeight($(window).height()); 
canvas.setWidth($(window).width()); 
canvas.backgroundImage.width = $(window).width(); 
canvas.backgroundImage.height = $(window).height(); 

Проблема заключается в том, что фон холст & подогнаны, но не объекты. Они сохраняют ту же позицию относительно экрана и не меняют размер, поэтому они включены в другие экраны. Как решить эту проблему?

ответ

3

После многих попыток я нашел решение благодаря подсказке АндреаБогацци. При изменении размера/положения фона/холста объекты не сохраняют размер/положение относительно фона/холста.

Вот почему лучше использовать функцию масштабирования, таким образом, все элементы холста получает регулируется таким же образом относительно друг друга:

// background: background image 
// zoom: zoom amount usable with canvas.setZoom(zoom). 

if (background.width < $(window).width()) { 
    zoom = $(window).height()/background.height; 

    if ((zoom * background.width) > $(window).width()) { 
     zoom = $(window).width()/background.width; 
    } 

} else { 
    zoom = $(window).width()/background.width; 

    if ((zoom * background.height) > $(window).height()) { 
     zoom = $(window).height()/background.height; 
    } 
} 
canvas.setZoom(zoom); 

Это приведет к холсту всегда быть это максимальный размер без без выхода из экрана и со всеми элементами, поддерживающими правильное положение и высоту.

+1

вот что я хотел предложить. Вы сделали быстрее. Добавьте ответ canvas.setZoom(), чтобы люди знали, что использовать. – AndreaBogazzi

+0

Для меня масштабирование работает нормально, но когда я пытаюсь сохранить в базе данных, тогда сохраняются исходные координаты и размеры. Что делать? – Khuram

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