javascript - 如何创建自定义 fabricjs 对象？

Question

我必须创建一个自定义 fabricjs 对象(例如，fabric.Demo)，它扩展 fabric.Group 对象。 fabric.Demo 对象将用于对其他两个 fabric.Group 对象进行分组。我在 Internet 上搜索过，发现只有这些链接有用。

1. > Link 1
2. > Link 2

但我收到此错误“this._objects is undefined”。我知道我没有写 _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

如果你想扩展 Group，你必须尊重它的基本功能，渲染存储在 _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);

扩展渲染函数，思考你需要的不同于标准组的东西，如果你想加载和恢复你的 Canvas ，不要忘记放置 fromObject 函数。