CSS 如何在 Fabric.js 中将对象动态缩放到画布大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18954654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scale object dynamically up to canvas size in Fabric.js
提问by amit gupta
I want to increase height and width of my svg image same as canvas height and width so that it look like background image of canvas. When I press Set Background button, one svg image will be set to canvas from my directory. I want to scale this image up to canvas height and width dynamically.
我想增加与画布高度和宽度相同的 svg 图像的高度和宽度，使其看起来像画布的背景图像。当我按下“设置背景”按钮时，一个 svg 图像将从我的目录中设置为画布。我想动态地将此图像缩放到画布高度和宽度。
Expected Output: I want this
预期输出：我想要这个
Html
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" />
Script
脚本
$(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();
});
});
});
Here is my FIDDLE Demo.
这是我的FIDDLE 演示。
Does anybody have an idea how to do this?
有没有人知道如何做到这一点？
回答by Sergiu Paraschiv
回答by amit gupta
I finally got the solution:
我终于得到了解决方案：
HTML
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
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();
});
working Demo Fidddle
工作演示小提琴
