Estoy tratando de hacer un objeto personalizado como en el tutorial http://fabricjs.com/fabric-intro-part-3 (el LabeledRect). El objeto debe clonarse, por lo que tendría que implementar el método fromObject .
Estoy usando reaccionar con mecanografiado y no estoy seguro de cómo implementar el método fromObject .
const addLabeledRect = (canv: fabric.Canvas | null) => { var LabeledRect = fabric.util.createClass(fabric.Rect, { type: 'labeledRect', initialize: function (options: { label?: any; }) { options || (options = {}); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: function () { return fabric.util.object.extend(this.callSuper('toObject'), { label: this.get('label') }); }, _render: function (ctx: { font: string; fillStyle: string; fillText: (arg0: any, arg1: number, arg2: number) => void; }) { this.callSuper('_render', ctx); ctx.font = '20px Helvetica'; ctx.fillStyle = '#333'; ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20); } }); var labeledRect = new LabeledRect({ width: 100, height: 50, left: 100, top: 100, label: '1', fill: '#fff' }); labeledRect.set('data', { first_item: 'Hello', second_item: 'World', next_itme: true }) canv?.add(labeledRect);} Este código funciona bien, la cosa es que cuando quiero copiar y pegar el objeto no funciona correctamente. ¿Cómo implementaría el método fromObject para poder copiar y pegar el objeto?
Investigué un poco y encontré una solución, así que pensé en publicarla, tal vez sea útil para alguien. Esta publicación me ayudó mucho: Selección de clonación de objetos personalizados
Me tomó un tiempo, pero resulta que tienes que asignar la propiedad a la biblioteca de tejidos para que funcione:
fabric.LabeledRect = fabric.util.createClass(...)y para mecanografiado, primero debe asignar tejido a una variable de tipo cualquiera para omitir el sistema de tipos y luego funcionará:
var Fabric: any = fabric; Fabric.LabeledRect = fabric.util.createClass(...) así que solo tuve que asignar fabric a una variable de tipo any y asignar la propiedad a la biblioteca de fabric y agregar la función fromObject . Ahora puedo copiar y pegar mi Rect etiquetado.
Así es como lo resolví:
const addLabeledRect = (canv: fabric.Canvas | null) => { var Fabric: any = fabric; Fabric.LabeledRect = fabric.util.createClass(fabric.Rect, { type: 'labeledRect', initialize: function (options: { label?: any; }) { options || (options = {}); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: function () { return fabric.util.object.extend(this.callSuper('toObject'), { label: this.get('label') }); }, _render: function (ctx: { font: string; fillStyle: string; fillText: (arg0: any, arg1: number, arg2: number) => void; }) { this.callSuper('_render', ctx); ctx.font = '20px Helvetica'; ctx.fillStyle = '#333'; ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20); } } ); //added this part Fabric.LabeledRect.fromObject = function (object: any, callback: any) { var labeledRect = new Fabric.LabeledRect(object); callback && callback(labeledRect); return labeledRect; }; var labeledRect = new Fabric.LabeledRect({ width: 100, height: 50, left: 100, top: 100, label: '1', fill: '#fff' }); labeledRect.set('data', { first_item: 'Hello', second_item: 'World', next_itme: true }) canv?.add(labeledRect);}