CODEWITHSUNDEEP
svgfabricjs
Roger Large
Roger Large

Reputation: 115

text over imported svg with fabricjs

I'm importing several svgs that are all created from the same image and layered on top of each other. I would like to add text centered over a certain svg/textarea path. And then scale textarea to fit the text provided with a min size. And ive confused myself. I have no idea anymore? I deleted everything and started over direction would be very helpful. Heres what i got. 

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

fabric.loadSVGFromURL('/1-man.svg', function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});

fabric.loadSVGFromURL('/1-man-cutout.svg', function(objects, options) 
{
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});

fabric.loadSVGFromURL('/textarea.svg', function(objects, options) {
var obj2 = fabric.util.groupSVGElements(objects, options);
canvas.add(obj2).renderAll();
});

var text = new fabric.Text("Hello", {
fontFamily: 'ubuntu',
fontSize: 300,
textAlign: "center",
});

canvas.add(text);

Upvotes: 0

Views: 893

Answers (1)

Roger Large
Roger Large

Reputation: 115

Brain was dead i suppose.... took about a min this morning.. Ill keep it for a lesson on sleeping on it.

text.set('left', (objects[0].width - text.width)/2);
text.set('top', objects[0].top + 5);
canvas.add(obj2, text).renderAll();

Upvotes: 2

Related Questions