Как создать пользовательский объект fabricjs?

Question

Я должен создать пользовательский объект fabricjs (скажем, fabric.Demo), который extends fabric.Group объект. fabric.Demo объект будет используется для сгруппировки других двух тканей. Объекты группы. Я искал в Интернете и нашел только эти ссылки полезными.

1. Link 1
2. Link 2

Но я получаю эту ошибку 'this._objects не определена'. Я знаю, что я не пишу _render(). Но я не понимаю, что кодировать в _render(). Если кто-нибудь знает ответ, он будет оценен.

Вот мой код.

(function (global) { 

    var fabric = global.fabric || (global.fabric = {}), 
      extend = fabric.util.object.extend, 
      clone = fabric.util.object.clone; 

    var stateProperties = fabric.Text.prototype.stateProperties.concat(); 
    stateProperties.push(
      'top', 
      'left' 
      ); 

    fabric.Demo = fabric.util.createClass(fabric.Group, { 
     type: 'demo', 
     initialize: function() { 

      this.grp = new fabric.Group([], { 
       selectable: false, 
       padding: 0 
      }); 

      this.grp.add([ 
       new fabric.Group([ 
        new fabric.Text('A', {top: 200, left: 200}), 
        new fabric.Text('B', {top: 200, left: 200}) 
       ]), 
       new fabric.Group([ 
        new fabric.Text('C', {top: 200, left: 200}), 
        new fabric.Text('D', {top: 200, left: 200}) 
       ]) 
      ]); 
     }, 
     _render: function (ctx) { 

     } 
    }); 
})(typeof exports !== 'undefined' ? exports : this); 

$(document).ready(function() { 
    var canvas = new fabric.Canvas('c'); 
    var abc = new fabric.Demo(); 
    canvas.add(abc); 
}); 

Answer 1

Если вы хотите расширить группу вы должны уважать свою основную функцию, визуализации Handfull объектов, хранящихся в массиве _objects.

Итак, когда вы инициализируете свой класс, не создавайте this.grp.

вместо этого нажмите 2 группы внутри массива _objects.

fabric.Demo = fabric.util.createClass(fabric.Group, { 
     type: 'demo', 
     initialize: function() { 

      this.grp = new fabric.Group([], { 
       selectable: false, 
       padding: 0 
      }); 

      this._objects.push(
       new fabric.Group([ 
        new fabric.Text('A', {top: 200, left: 200}), 
        new fabric.Text('B', {top: 200, left: 200}) 
       ])); 
      this._objects.push(
       new fabric.Group([ 
        new fabric.Text('C', {top: 200, left: 200}), 
        new fabric.Text('D', {top: 200, left: 200}) 
       ])); 
     } 
    }); 
})(typeof exports !== 'undefined' ? exports : this); 

расширить функции визуализации мышления, что вам нужно отличается от стандартной группы, и не забудьте поставить функцию fromObject, если вы хотите загрузить и восстановить ваш холст.