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.
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);
---------------------------------------------------------------------------------------------------------------------------------------------------
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.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步