Wie erstellt man ein benutzerdefiniertes fabricjs Objekt?

Question

Ich muss ein benutzerdefinierte fabricjs Objekt (sagen, Fabric.Demo), die erweitert Fabric.Group Objekt erstellen. fabric.Demo-Objekt wird verwendet, um andere zwei fabric.Group-Objekte zu gruppieren. Ich habe im Internet gesucht und nur diese Links als nützlich gefunden.

1. Link 1
2. Link 2

Aber ich immer diese Fehlermeldung 'this._objects ist nicht definiert'. Ich weiß, ich habe _render() nicht geschrieben. Aber ich verstehe das nicht in _render() zu codieren. Wenn jemand die Antwort kennt, wird es geschätzt.

Hier ist mein Code.

(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

Wenn Sie Gruppe erweitern möchten Sie haben ihre Grundfunktion zu respektieren, eine Handvoll von Objekten in der _objects Array gespeichert machen. Wenn Sie Ihre Klasse initialisieren, erstellen Sie keine this.grp.

Drücken Sie stattdessen Ihre 2 Gruppen in einem _objects Array.

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

erweitern machen Funktionen denken, was Sie von der Standardgruppe unterschiedlich benötigen, und nicht zu vergessen die Funktion Fromobject zu setzen, wenn Sie Ihre Leinwand zu ladende und wiederherstellen.