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.
最新文章
- 冰冻三尺非一日之寒--web框架Django(三)
- PHP注册审核做法
- struts2将servlet对象注入到Action中
- Struts2拦截器原理以及实例
- 转 java 类 单例
- 菜鸟-手把手教你把Acegi应用到实际项目中(5)
- poj 3311(floyd+状态压缩)
- ps 快捷键
- Java Interface and Abstraction
- Kotlin封装RxJava与Retrofit
- 机器学习技法：14 Radial Basis Function Network
- Postman----模拟服务器返回数据
- 关于微信emoji 表情数据库存不了，或者显示为？？？的问题
- Clustering[Introduction]
- WARN conf.FlumeConfiguration: Could not configure sink sink1 due to: No channel configured for sink: sink1 org.apache.flume.conf.ConfigurationException: No channel configured for sink: sink1
- Win10下JDK环境变量的设置
- is_readable() 函数检查指定的文件是否可读。
- Linux下Tomcat的启动、关闭
- linux消息队列编程实例
- <dedecms>织梦内页调用会员信息