I want use fabricjs with vue.js

Question

I am trying to use fabricjs with vue.js but facing some problems. Here's 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일때

            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');
};

This should now initialize fabricjs but when I use in vue.js, it is still not working. How can I fix it?

Please me a little more clear about what you're trying to achieve. — Gaurav Ojha
– Gaurav Ojha, Commented Nov 21, 2017 at 5:11

Sukanta Bala · Accepted Answer · 2018-02-17 12:33:16Z

4

You should initialize canvas in Vue js mounted function not created function.

For example:

mounted: 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();
}

No need any code to created function.

created: function () {
 // No need any code for fabric.js canvas
}

answered Feb 17, 2018 at 12:33

Sukanta Bala

8791 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I want use fabricjs with vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related