I am currently exploring the integration of fabricjs with vue.js, but I have encountered some issues along the way. Below is a snippet of my code:
var app = new Vue({
el: '#content_vue',
data: {
},
methods: {
add_image: function() {
var vm = this;
fabric.loadSVGFromURL('/images/sample.svg', function(objects, options) {
for (var i = 0; i < objects.length; i++) {
if (objects[i].get('type') == 'text') { //text condition
var iText = textChangeToIText(fabric.cssRules[options.svgUid], objects[i], options);
objects[i] = iText;
}
objects[i].setCoords();
vm.canvas.add(objects[i]);
}
vm.canvas.renderAll();
}, reviver);
}
},
created: function() {
var canvas = new fabric.Canvas('my_canvas', {
backgroundColor: "white"
});
this.canvas = canvas;
canvas.selection = false; // disable group selection
var iText4 = new fabric.IText('abcdefg\nhijklmnop', {
left: 200,
top: 50,
fontFamily: 'Lobster',
caching: false
});
canvas.add(iText4);
canvas.renderAll();
}
});
function reviver(element, object) {
if (object.get('type') == 'text') {
var childrens = [].slice.call(element.childNodes);
object.temp = childrens;
var tmpArr = element.getAttribute('y');
//var arr = tmpArr[tmpArr.length-1].split(')');
//console.log(element);
//console.log(object.top);
//object.top = parseFloat(arr[0]);
}
object.id = element.getAttribute('id');
};
Despite following these steps to initialize fabricjs, I am still facing issues when integrating it with vue.js. Any suggestions on how to resolve this?