Fabricjs - масштабировать фон холста, чтобы «содержать» в границах холста - PullRequest
Новая
       34

Fabricjs - масштабировать фон холста, чтобы «содержать» в границах холста

0 голосов
/ 04 сентября 2018

Я пытаюсь установить фоновое изображение квадратного холста fabric.js, чтобы оно заполняло холст на более длинной стороне, сохраняя соотношение сторон, имитируя эффект background-size : 'contain' для css.

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

enter image description here

У меня есть эта скрипка, которая полностью масштабирует и покрывает холст, что-то вроде 'background-size' : 'cover' на CSS.

https://jsfiddle.net/7s5obuk2/165/

Но я не смог успешно изменить его, чтобы достичь того, о чем я говорил выше. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 04 сентября 2018

Измените условие, в котором вы устанавливаете масштабный коэффициент для сравнения bgImage.width с bgImage.height примерно так: 

        if (bgImage.width > bgImage.height) {
            scaleFactor = canvasWidth / bgImage.width;
            ...
        } else {
            scaleFactor = canvasHeight / bgImage.height;
            ...
        }

Это должно дать вам то, что вам нужно, вот скрипка:
https://jsfiddle.net/dkr3c2n0/

...