Как получить холст в полноэкранном режиме с помощью KineticJS

Я использую KineticJS-Library для работы с моим элементом canvas.Как получить холст в полноэкранном режиме с помощью KineticJS

Мне нужен один большой холст-элемент размером 1920x1080 пикселей, на моем сайте ничего больше не отображается.

Если разрешение браузера не является достаточно высоким, я хочу уменьшить масштаб всего элемента: Соотношение сторон всегда должно оставаться на уровне 16: 9, а размер элемента должен быть как можно большим (см. черные границы, если отношение браузера отличается).

Однако координатное пространство должно оставаться на уровне 1920x1080 - я не хочу вычислять с помощью координат.

Есть ли способ, которым я могу это достичь?

источник

2013-11-13 maja

Существует несколько способов сделать это: stage.scale (value); вручную измените размер каждого элемента на основе масштаба снова. Зависит от того, как вы хотите это сделать. Но сначала попробуйте показать, что вы уже сделали. – Ani

Я создал придушку: http://jsfiddle.net/h5j9a/ Но кажется, что мой скриптовый код не работает – maja

я нашел еще один способ, который намного проще реализовать - есть встроенный в Fullscreen-функции канвы-Elements, который устанавливает весь холст в полноэкранном режиме, и при необходимости отображает черные границы.

http://www.sitepoint.com/html5-full-screen-api/

Я добавил эту функцию-вызов на ondblclick -Event из Ajax-элемента: Каждый раз, когда пользователь дважды щелкает элемент, он разрешает или запрещает полноэкранный режим.

Обратите внимание, что вы не можете вызвать эту функцию в своем javascript-коде: Браузеры разрешают полноэкранный режим, если событие было инициировано пользователем.

Он работает в Firefox и Chrome, но в IE он не работает. Я не тестировал другие браузеры.

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

источник

2013-11-17 09:31:42 maja

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

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

Это мой HTML-тело:

<body onload='init()'> 
    <div id="canvasWrapper"></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 ratio = x/y;   //browser-ratio 
    var should = 1920/1080;  //needed ratio 

    var cv = document.getElementsByTagName("canvas")[0]; 
    var cc = document.getElementsByClassName("kineticjs-content")[0]; 

    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(ratio > should){   //x-diff > y-diff ==> black borders left&right 
     cx = (y*1920/1080); 
     cy = y; 
     cleft = (x-cx)/2; 
    }else{      //y-diff > x-diff ==> black borders top&bottom 
     cx = x; 
     cy = (x*1080/1920); 
     cv.setAttribute("style", "width:"+x+"px;height:"+(x*1080/1920)+"px;"); 
    } 

    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 
}

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

После этого я установил автоматически генерируемый «kineticjs-content» -div полный полноэкранный размер и размер элемента canvas для ранее рассчитанного размера.

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

Это кросс-браузерный (проверено на Firefox 25, Chrome 31 и Internet Explorer 11)

источник

2013-11-14 10:46:04 maja

Обратите внимание, что после перерисовки вам, возможно, придется снова вызвать resizeCanvas() – maja

Как получить холст в полноэкранном режиме с помощью KineticJS

ответ

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