1

我正在使用 KineticJS-Library 来处理我的画布元素。

我需要一个大小为 1920x1080 像素的大画布元素，我的网站上没有其他内容。

如果浏览器的分辨率不够高，我想缩小整个画布-元素：纵横比总是要保持在16:9，并且元素的大小要尽可能大（黑色边框，如果浏览器的比例不同）。

但是，坐标空间必须保持在 1920x1080 - 我不想用坐标计算。

有没有办法可以做到这一点？

4

2 回答 2

1

在尝试了scale-Property之后，终于找到了一个更简单的解决方案，我只需要修改css-properties。

答案很简单，虽然很长。

这是我的 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;
}

重要的部分是我的 canvas-wrapper 的“inline-block”，以及 body-element 的“overflow: hidden”。画布下方似乎有一些像素，这会使两个滚动条都出现。

经过一番试验，我得到了以下js-code：

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

每当屏幕尺寸发生变化时，我的“resize”-Function 就会被调用。

整个技巧是在这个 resize-Function 中完成的：

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-Element 的尺寸设置为之前计算的尺寸。

无需更改画布内容和重新绘制任何内容，一切都可以正常工作。

它是跨浏览器兼容的（在 Firefox 25、Chrome 31 和 Internet Explorer 11 上测试）

于 2013-11-14T10:46:04.943 回答
0

我发现了另一种更容易实现的方法——画布元素有一个内置的全屏功能，它将整个画布设置为全屏模式，并在需要时显示黑色边框。

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

我将此函数调用添加到ondblclickAjax-Element 的 -Event 中：每次用户双击元素时，它都会启用或禁用全屏模式。

请注意，您不能在您的 javascript 代码中调用此函数：如果事件是由用户触发的，浏览器只允许全屏显示。

它适用于 Firefox 和 Chrome，但不适用于 IE。我没有测试过其他浏览器。

我目前结合了这种方法和我的第一个答案，并且效果很好。

于 2013-11-17T09:31:42.493 回答