javascript - 如何在 Fabric.js 中将对象动态缩放到 Canvas 大小

Question

我想增加我的 svg 图像的高度和宽度，使其与 Canvas 的高度和宽度相同，以便它看起来像 Canvas 的背景图像。当我按下设置背景按钮时，一张 svg 图像将从我的目录设置为 Canvas 。我想动态地将此图像缩放到 Canvas 的高度和宽度。

预期输出:I want this

HTML

<h1>canvas</h1>
<canvas style="left: -300px; border: 1px dotted;" height="385" width="400" id="c"></canvas>
<input type="button" id="svg3" value="set background" />

脚本

$(document).ready(function(){
    var canvas = new fabric.Canvas('c');
    var colorSet="red";
    $("#svg3").click(function(){
        fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) { 
            var shape = fabric.util.groupSVGElements(objects, options);
            shape.set({
                left: 150,
                top:200,
                //height: 700,
                //width: 700,
                scaleX: .35,
                scaleY:.35
            });

            if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
                shape.setFill(colorSet);
            } else if (shape.paths) {
                for (var i = 0; i < shape.paths.length; i++) {
                    shape.paths[i].setFill(colorSet);
                }
            }

            canvas.add(shape);
            canvas.renderAll();
        });
    });
});

这是我的 FIDDLE Demo .

有人知道如何做到这一点吗？

Answer 1

您知道 Canvas 的宽度和高度。所以this将工作:

shape.set({
    top: canvas.height/2,
    left: canvas.width/2,
    scaleY: canvas.height / shape.height,
    scaleX: canvas.width / shape.width
});