如何调整画布和内部的所有内容？

Question

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

感谢。

Answer 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();
        }           
    }