Показать холст в полноэкранном режиме в Fabric.js

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

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

Кроме того, соотношение сторон всегда должно быть одинаковым - мне нужно координатное пространство 1920-1080 точек. (Может быть граница сбоку элемента холста, если браузер не имеет такого же соотношения).

Мне удалось реализовать это с помощью html + css:

  • с = 100% экрана
  • Максимум. координаты 1920 х 1080

Но когда я реализовал Fabric.js, размер холста изменился. И я не могу установить его обратно, чтобы иметь отзывчивый дизайн.

Как я могу добиться этого с помощью fabric.js?


responsive-design fabricjs
person maja    schedule 12.11.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Немного поэкспериментировав, я наконец нашел решение, в котором мне нужно только изменить css-свойства.

Ответ очень простой, хотя и очень длинный.

Это мой html-текст:

<body onload='init()'>
    <div id="canvasWrapper">
    <canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>

А это мой css:

*{
    padding: 0;
    margin: 0;
    border: 0;
}

body{
    overflow: hidden;
}

#canvasWrapper {
    background-color: red;
    display: inline-block;
}

Важными частями являются «встроенный блок» моего холста-обертки и «переполнение: скрытый» элемента тела. Кажется, что под холстом есть несколько пикселей, из-за которых появляются обе полосы прокрутки.

После некоторых экспериментов я получил следующий js-код:

function init(){    
    resizeCanvas();         //resize the canvas-Element
    window.onresize = function()  { resizeCanvas(); }
}

Всякий раз, когда изменяется размер экрана, будет вызываться моя функция «изменения размера».

Весь трюк выполняется в этой функции изменения размера:

function resizeCanvas() {
    var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    var cv = document.getElementsByTagName("canvas")[0];
    //var cc = document.getElementsByClassName("canvas-container")[0];      //In case of non-Static Canvas will be used
    var cc = document.getElementById("canvasWrapper");

    var cx,cy;                  //The size of the canvas-Element
    var cleft=0;                //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
    if(x/y > sizeX/sizeY){      //x-diff > y-diff   ==> black borders left&right
        cx = (y*sizeX/sizeY);
        cy = y;
        cleft = (x-cx)/2;
    }else{                      //y-diff > x-diff   ==> black borders top&bottom
        cx = x;
        cy = (x*sizeY/sizeX);
    }
    cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;");                                          //canvas-content = fullscreen
    cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px");    //canvas: 16:9, as big as possible, horizintally centered
}

Эта функция вычисляет ширину окна и максимально возможный размер холста без изменения соотношения.

После этого я установил обертку-div на полноэкранный размер, а размер элемента холста — на ранее рассчитанный размер.

Все работает без необходимости менять содержимое элемента canvas и ничего не перерисовывать.

Он совместим с разными браузерами (проверено на Firefox 25, Chrome 31 и Internet Explorer 11).

person maja    schedule 15.11.2013
comment
Что такое sizeX и sizeY в выражении if(x/y › sizeX/sizeY)? Я новичок в Canvas. - person Salil Momin; 05.02.2014
comment
@SalilMomin Это 2 глобальные переменные, которые я загружаю из файла конфигурации. Они символизируют размер холста (размер системы координат внутри холста, а не фактический размер в пикселях на экране). Я установил их на var sizeX = 1920, sizeY = 1080; - person maja; 05.02.2014
comment
Следовательно, sizeX/sizeY — это соотношение, которого я хочу добиться. В моем случае это 16:9. - person maja; 05.02.2014

arrow_upward
4
arrow_downward

решение в версии 2.4.2-b, это официальный метод API: http://fabricjs.com/docs/fabric.js.html#line7130

это работает в моем коде, установите ширину и высоту 100%:

fabricCanvas.setDimensions({
  width: '100%',
  height: '100%'
},{
  cssOnly: true
});
person Augustine    schedule 24.10.2018