fabricjs 自定義類型

https://stackoverflow.com/questions/36660108/how-to-create-custom-fabricjs-object

I have to create a custom fabricjs object(say, fabric.Demo) which extends fabric.Group object. fabric.Demo object will be used to grouped other two fabric.Group objects. I have searched on the Internet and found only these links as useful.

1. Link 1
2. Link 2

But I'm getting this error 'this._objects is undefined'. I know I haven't write _render(). But I don't understand that what to code in _render(). If anyone knows the answer, it will be appreciated.

Here is my 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);

 

---------------------------------------------------------------------------------------------------------------------------------------------------

3down voteaccepted

If you want to extend Group you have to respect its basic function, render a handfull of objects stored in the _objects array.

So when you initialize your class do not create a this.grp.

instead push your 2 groups inside a _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);

extend render functions thinking what you need different from standard group, and do not forget to put the fromObject function if you want to load and restore your canvas.