[英]How to scale object dynamically up to canvas size in Fabric.js
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. 我想增加svg图像的高度和宽度,与画布的高度和宽度相同,使其看起来像画布的背景图像。 When I press Set Background button, one svg image will be set to canvas from my directory. 当我按下“设置背景”按钮时,一个svg图像将从我的目录设置为画布。 I want to scale this image up to canvas height and width dynamically. 我想动态地将此图像缩放到画布高度和宽度。
Expected Output: I want this 预期产出: 我想要这个
<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();
});
});
});
Here is my FIDDLE Demo . 这是我的FIDDLE演示 。
Does anybody have an idea how to do this? 有人知道怎么做吗?
I finally got the solution: 我终于得到了解决方案:
<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" />
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.