4

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

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

此外，纵横比应该始终相同——我想要一个 1920-1080 点的坐标空间。（如果浏览器没有相同的比例，画布元素的一侧可以有边框）。

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

  • 有 = 100% 的屏幕
  • 最大限度。坐标为 1920 x 1080

但是当我实现 fabric.js 时，它改变了画布的大小。我不能把它放回去，有一个响应式设计。

我怎样才能用fabric.js 做到这一点？

4

2 回答 2

5

经过一番试验，我终于找到了一个只需要修改css-properties的解决方案。

答案很简单，虽然很长。

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

重要的部分是我的 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 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
}

此函数计算窗口宽度，以及在不改变比率的情况下可能的最大画布大小。

之后，我将 wrapper-div 设置为 fullscreen-size，并将 canvas-Element 的大小设置为之前计算的大小。

一切都不需要改变画布元素的内容，也不需要重绘任何东西。

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

于 2013-11-15T19:20:41.720 回答
4

2.4.2-b版本的解决方案，官方Api方法： http: //fabricjs.com/docs/fabric.js.html#line7130

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

fabricCanvas.setDimensions({
  width: '100%',
  height: '100%'
},{
  cssOnly: true
});
于 2018-10-24T03:16:23.133 回答