Develop Reference

How to keep SVG image scale/viewport on zoom in fabricjs version 2.x?

I upgraded fabricjs to 2.x and 3.x. in both version, when I zoom the canvas the svg image also scaling or viewport changing.
let greenCircle = new fabric.Circle({ radius: 50, fill: 'green', top: 110, left: 30 })
let orangeEllipse = new fabric.Ellipse({ rx: 50, ry: 10, fill: 'orange', top: 12, left: 100, angle: 30 });
let group = new fabric.Group([orangeEllipse, greenCircle]);
canvas.add(group);
fabric.Image.fromURL(
'https://gistcdn.githack.com/mudin/f633f3637b71b3dd9fcae1a88be27d8f/raw/850e8bf2baac6194bcf38190ca15defafb2ea2e7/floorplan.svg?raw=true',
image => {
image = image.scaleToWidth(1000);
group.addWithUpdate(image);
canvas.renderAll();
}
);
canvas.renderAll();
working demo in version 1.7.x
not working in version 3.x
I checked the breaking changes in version2, but couldnt solve my issue.
Any help would be appreciated!

Fabric JS Replace Objects with Same Item(ID)

I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);

You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs

How can I find an object with fabricjs

I have circles on my webpage, and I want to find a circle and then draw a line to another circle.
Is this possible with FabricJS?

Try starting here:
http://fabricjs.com/stickman/
http://fabricjs.com/quadratic-curve/
I made a example for you:
var canvas = new fabric.Canvas('c');
canvas.add(
new fabric.Circle({ top: 50, left: 50, radius: 25, fill: 'red' }),
new fabric.Circle({ top: 300, left: 300, radius: 25, fill: 'red' })
);
canvas.renderAll();
$('#drawLine').click(function(){
canvas.add(new fabric.Line([50, 50, 300, 300], {
left: 50+25, //25 = 50/radius
top: 50+25,
stroke: 'blue'
}));
});
Link here: http://jsfiddle.net/q6Y6k/17/

After adding a path to a group in fabricjs, toSVG() gives an svg image that is different from the canvas layout

I have a group of shapes that are supposed to be moved and scaled together on the canvas. For doing this I added all of these to a fabric Group. One of the shape is a fabric Path. While it adds properly on the canvas, when converting the Canvas to SVG, it changes it's position.
I have made a fiddle for it : http://jsfiddle.net/RZcY7/4/
Export svg button will push the svg data to console. click there to open it in browser. It can be seen that the position of triangle(which is a fabric Path) is different on canvas and svg.
Here's the code:
var DefaultGroupSettings = {
originX: 'center',
originY: 'center',
hasBorders: true,
hasControls: true,
hasRotatingPoint: true,
lockUniScaling: true
};
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
radius: 50,
left: 175,
top: 75,
fill: '#aac'
});
var group = new fabric.Group([rect, circle], DefaultGroupSettings);
canvas.add(group);
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
top: 150,
left: 100
});
group.addWithUpdate(path);
canvas.renderAll();
Is it an issue to add a Path to a Group? If yes, how can I club Path and an Object together?
Thanks in advance!

kineticjs rect fillText

I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru

I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/

Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.