我想将fabricjs与vue.js一起使用

Question

我正在尝试将fabricjs与vue.js一起使用，但遇到一些问题。 这是我的代码-

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

现在应该初始化fabricjs，但是当我在vue.js中使用时，它仍然无法正常工作。 我该如何解决？

Answer 1

您应该在Vue js挂载函数而非创建函数中初始化canvas。

例如：

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

无需任何代码即可创建函数。

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