Responsive design 在Fabric.js中全屏显示画布_Responsive Design_Fabricjs

Responsive design 在Fabric.js中全屏显示画布

responsive-design

Responsive design 在Fabric.js中全屏显示画布,responsive-design,fabricjs,Responsive Design,Fabricjs,我希望我的画布元素始终具有相同的大小—与客户端的屏幕分辨率无关如果用户使用浏览器缩放，画布元素应始终具有相同的大小此外，纵横比应始终相同-我希望坐标空间为1920-1080点。（如果浏览器没有相同的比率，画布元素的侧面可以有边框）我设法用html+css实现了这一点：带=100%屏幕最大坐标为1920 x 1080 但是当我实现fabric.js时，它改变了画布的大小。而且我不能让它倒退，有一个反应灵敏的设计如何使用fabric.js实现这一点？经过一点尝试，我终于找到了一个只需

我希望我的画布元素始终具有相同的大小—与客户端的屏幕分辨率无关

如果用户使用浏览器缩放，画布元素应始终具有相同的大小

此外，纵横比应始终相同-我希望坐标空间为1920-1080点。（如果浏览器没有相同的比率，画布元素的侧面可以有边框）

我设法用html+css实现了这一点：

带=100%屏幕
最大坐标为1920 x 1080

但是当我实现fabric.js时，它改变了画布的大小。而且我不能让它倒退，有一个反应灵敏的设计

如何使用fabric.js实现这一点？

经过一点尝试，我终于找到了一个只需修改css属性的解决方案

答案很简单，虽然很长

这是我的html正文：

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

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

body{
    overflow: hidden;
}

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

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
}

重要的部分是canvas包装器的“inline块”和body元素的“overflow:hidden”。画布下面似乎有一些像素，这会使两个滚动条都出现

经过一些实验，我得到了以下js代码：

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

每当屏幕大小改变时，就会调用我的“调整大小”功能

整个技巧都是在这个调整大小功能中完成的：

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

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

body{
    overflow: hidden;
}

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

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元素的大小设置为之前计算的大小

一切都可以正常工作，无需更改canvas元素的内容，也无需重新绘制任何内容

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

版本2.4.2-b中的解决方案，它是官方Api方法：

它适用于我的代码，设置宽度和高度100%：

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

在语句if（x/y>sizeX/sizeY）中，sizeX和sizeY是什么？我是画布上的新手。@SalilMomin这是两个全局变量，我是从配置文件加载的。它们表示画布大小（画布中的坐标系大小，而不是屏幕上的实际px大小）。我将它们设置为

var sizeX=1920，sizeY=1080sizeX/sizeY

是我想要达到的比率。在我的例子中，它是16:9
。