如何创建自定义的fabricjs对象? [英] How to create custom fabricjs object?

问题描述

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

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. 链接1
2. 链接2

1. Link 1
2. Link 2

但是我收到此错误"this._objects未定义".我知道我还没有写_render().但是我不明白在_render()中编码什么.如果有人知道答案，将不胜感激.

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.

这是我的代码.

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

推荐答案

如果要扩展Group，则必须遵守其基本功能，请渲染一堆存储在_objects数组中的对象.

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

因此，在初始化类时，请勿创建this.grp.

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

相反，将您的2个组推入_objects数组中.

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

扩展渲染函数以考虑与标准组有何不同，并且如果要加载和还原画布，请不要忘记放置fromObject函数.

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.

这篇关于如何创建自定义的fabricjs对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！