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

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

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

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

мне удалось осуществить это с помощью HTML + CSS:

с = 100% от экрана
макс. координаты - 1920 x 1080

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

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

источник

2013-11-12 maja

После некоторого эксперимента я нашел решение, в котором мне нужно только изменить свойства 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)

источник

2013-11-15 19:20:41 maja

В заявлении, если (х/у> SizeX/SizeY), что SizeX и SizeY? Я новичок в холсте. –

@SalilMomin Это 2 глобальных переменных, которые я загружаю из конфигурационного файла. Они символизируют размер холста (размер координатной системы внутри холста, а не фактический размер пикселя на экране). Я установил их в 'var sizeX = 1920, sizeY = 1080;' – maja

Следовательно, 'sizeX/sizeY' - это отношение, которое я хочу достичь. В моем случае его «16: 9». – maja

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

ответ

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