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.

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

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

回答1:

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.

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

标签

javascript

fabricjs