如何在 Fabric.js 中将对象动态缩放到画布大小答案

【问题标题】：How to scale object dynamically up to canvas size in Fabric.js如何在 Fabric.js 中将对象动态缩放到画布大小
【发布时间】：2013-09-28 01:52:23
【问题描述】：

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

预期输出：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。

有人知道怎么做吗？

【问题讨论】：

您的“我想要这个”链接已失效 (404)。

标签： javascript css canvas svg fabricjs

【解决方案1】：

您知道画布的宽度和高度。所以this 可以工作：

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

【讨论】：

它对我的工作很好。我如何将这个 svg 图像设置为我的画布背景，你有什么想法吗？
为什么不在那个形状上设置selectable: false？
如果我设置 selectable: false 那么下次我想改变它的填充颜色时如何选择它Fiddle demo
有什么方法可以在不使用活动对象函数'var canvas.getActiveObject();'的情况下更改svg填充颜色
这与填充颜色无关。只要您有对shape 的引用，您就可以更改它。 selectable: false 所做的是删除移动/缩放/旋转控件，以便用户无法更改它。

【解决方案2】：

我终于得到了解决方案：

HTML

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

JavaScript

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

var canvas = new fabric.Canvas('c');
var background;


$("#svg3").click(function() {
    fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', 
        function (objects, options) { 
            background = fabric.util.groupSVGElements(objects, options);


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

            setBackgroundColor('red');

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

$("#color").click(function(){
    setBackgroundColor('blue');
    canvas.renderAll();
});

工作演示Fidddle

【讨论】：