如何调整 Fabric.js 画布和里面所有内容的大小？答案

【问题标题】：How can I resize a Fabric.js canvas and all the content inside?如何调整 Fabric.js 画布和里面所有内容的大小？
【发布时间】：2017-06-15 00:53:53
【问题描述】：

您好，我正在尝试调整 Fabric.js 画布元素的大小并按比例调整其中的内容。我只是增加了画布区域的宽度和高度，但图像、文本等内容仍保持其原始大小。我怎样才能实现这种行为。

谢谢。

【问题讨论】：

标签： fabricjs

【解决方案1】：

使用以下函数与所有元素/对象一起按比例调整画布大小。你可以传递任何宽度/大小GetCanvasAtResoution(279);希望这会有所帮助。

    function GetCanvasAtResoution(newWidth)
    {
        if (canvas.width != newWidth) {
            var scaleMultiplier = newWidth / canvas.width;
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                objects[i].left = objects[i].left * scaleMultiplier;
                objects[i].top = objects[i].top * scaleMultiplier;
                objects[i].setCoords();
            }
            var obj = canvas.backgroundImage;
            if(obj){
                obj.scaleX = obj.scaleX * scaleMultiplier;
                obj.scaleY = obj.scaleY * scaleMultiplier;
            }

            canvas.discardActiveObject();
            canvas.setWidth(canvas.getWidth() * scaleMultiplier);
            canvas.setHeight(canvas.getHeight() * scaleMultiplier);
            canvas.renderAll();
            canvas.calcOffset();
        }           
    }

【讨论】：

感谢您的回答，我尝试了该功能，但只调整了画布区域的大小，而不是里面的对象。我在您发布 GetCanvasAtResoution(width); 时调用了该函数
@Álvaro 我创建了一个 jsfiddle 来展示这个函数如何调整画布的大小以及其中存在的背景图像和文本对象 - jsfiddle.net/zsk7785t
嗨@Ranjana 非常感谢你，不是它的工作，感谢分享。