设置织物js画布的100%高度和宽度

Posted

技术标签:

【中文标题】设置织物js画布的100%高度和宽度【英文标题】:Set 100% height and width of fabric js canvas 【发布时间】:2020-03-29 21:08:54 【问题描述】:

我想根据背景图片设置画布的高度和宽度。

例如,如果图像的高度和宽度小于屏幕大小,则画布大小为屏幕的 100%,如果图像大小大于屏幕大小,则画布会根据它进行调整,而不剪切图像并显示滚动条。

目前,我已经修复了画布的高度和宽度

 <canvas id="canvas"  ></canvas>

背景图片代码为

 canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas),       
    );

如何让画布高宽动态?

【问题讨论】:

这能回答你的问题吗? make canvas as wide and as high as parent 我想根据背景图而不是父图来设置画布 【参考方案1】:

我已经使用

设置了动态画布大小
    var image = new Image()
    image.src = './img/form.jpg';
    image.onload = function () 
        var canv = $('#canvas');
        canv.attr('width', image.width);
        canv.attr('height', image.height);
        canvas.dispose();
        setTimeout(() => 
            canvas = new fabric.Canvas('canvas');
            canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), );
        , 500);

    ;

【讨论】:

以上是关于设置织物js画布的100%高度和宽度的主要内容,如果未能解决你的问题,请参考以下文章

我们如何在 php 中使用织物 Js 对画布上的图像执行相同的操作(缩放和旋转)?

如何在角度 chart.js 中更改画布高度和宽度

如何将织物画布拉伸到其父 div 的全宽

如何在没有溢出的情况下将画布的宽度和高度设置为浏览器的所有高度和宽度?

画布的 HTML 属性(宽度、高度)独立变化

更改画布宽度/高度时,将重置画布上下文