Масштабирование/Масштабирование холста в FabricJS?

Я чрезвычайно новичок в FabricJS, и я столкнулся с чем-то, что я не слишком уверен, как исправить. Я работаю над этим часами, поэтому, надеюсь, свежий набор глаз может быстро выявить проблемы.Масштабирование/Масштабирование холста в FabricJS?

Я пытаюсь масштабировать элемент холста (после загрузки изображения - скажем, 1920x1080), и я могу масштабировать его с помощью ползунка.

Ниже моя реализация этого метода:

function zoomCanvas(scale) { 
    canvas.setZoom(scale); 
    canvas.setWidth(editor.backgroundImage.getWidth() * canvas.getZoom()); 
    canvas.setHeight(editor.backgroundImage.getHeight() * canvas.getZoom()); 
}

и я называю это в моей canvas.setBackgroundImage функции следующим образом:

var canvasParent = canvas.getElement().parentElement.parentElement; 
zoomCanvas((canvasParent.offsetWidth/canvas.backgroundImage.getWidth()) - 0.05);

Это на самом деле работает точно так же, как я хочу. Он масштабирует изображение большего размера до ширины родителя (и немного дополнительного для заполнения - не уверен, что это хороший способ); однако, я получаю небольшую проблему на нижней части, а иногда и на правой стороне - моего холста/изображения. По-видимому, они не получают масштабируется прекрасно друг с другом, и я получаю что-то вроде этого:

Я попытался округление знаков после запятой, но в этом нет никакого смысла, и я не уверен, что с этим делать.

Обновление: Вот JSFIDDLE вопроса. Масштабируйте окно вверх и боком, пока не увидите красную линию внизу (по моему она появится либо справа, либо внизу).

ОБНОВЛЕНИЕ 2: Я думаю, что я понял проблему. Я был увеличен в браузере на 110%, а у Chrome появились некоторые визуальные эффекты с элементами Canvas, создаваемыми тканью. Тем не менее, я бы не хотел, чтобы это произошло, когда браузер был увеличен. Это ошибка в моем CSS или ошибка в Chrome? Я все еще сталкиваюсь с проблемой, но она реже. Иногда нижний холст в некоторых случаях выше, чем верхний.

источник

2016-05-01 Hunter Mitchell

было бы полезно, если бы здесь была js-скрипка. –

@AntonHarald вы правы. Дайте мне несколько минут, чтобы бросить их вместе. –

@ Обновление АнтонХаральда: пожалуйста, проверьте мое вторичное обновление. Мне жаль, я был на этом пути, чтобы долго ждать. Однако, это ошибка в Chrome или в моем CSS? Тем не менее, я все еще вижу проблему немного, но не так часто. –

После того, как я прочитал весь свой код и проведу тщательное тестирование, я узнал, что это особенно проблема с FlexBox и NOT fabricjs.

В моем коде я пытался центрировать вертикально холст в div, и flexbox вызывал эти странные проблемы. Для получения дополнительной информации смотрите JSFIDDLE и удалите flexbox из CSS.

источник

2016-05-02 11:30:19

Масштабирование/Масштабирование холста в FabricJS?

ответ

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