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

【问题标题】：I want use fabricjs with vue.js我想将fabricjs与vue.js一起使用
【发布时间】：2018-05-04 11:20:45
【问题描述】：

我正在尝试将 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 中使用时，它仍然无法正常工作。我该如何解决？

【问题讨论】：

请让我更清楚地了解您想要实现的目标。

标签： javascript vue.js vuejs2 fabricjs

【解决方案1】：

您应该在 Vue js 挂载函数而不是创建函数中初始化画布。

例如：

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
}

【讨论】：