カスタムfabricjsオブジェクトを作成する方法は？

Question

カスタムファブリックオブジェクト（たとえばfabric.Demo）を作成する必要があります。ファブリックを拡張します。グループオブジェクトです。ファブリック.Demoオブジェクトはグループ化された他の2つのファブリックに使用されます。グループオブジェクト。私はインターネットで検索し、これらのリンクだけが有用であると判断しました。

Link 2

しかし、私はこのエラー 'this._objectsが未定義である' を取得しています

Link 1

。私は_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

あなたがグループを拡張したい場合は、その基本的な機能を尊重しなければならない、_objects配列に格納されているオブジェクトのhandfullをレンダリングします。

したがって、クラスを初期化するときには、this.grpを作成しないでください。

代わりに_objectsアレイ内の2つのグループをプッシュします。

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機能を置くことを忘れないでください。