javascript - fabric.js - Circle don't work if properties defined outside of new fabric.Circle() brackets -
when create new circle object wit properties in brackets no problem appears when circle needs generated. (old way)
function vanillaobjectfunc(type) { if (type === 'rect') { var tobject = new fabric.rect({ width: 50, height: 50, opacity: 0.8, fill: 'black', left: canvasb.width / 2, top: canvasb.height / 2 }); } else { var tobject = new fabric.circle({ radius: 20, opacity: 0.8, fill: 'black', left: canvasb.width / 2, top: canvasb.height / 2 }); } canvasb.getobjects(); canvasb.add(tobject); canvasb.selection = false; canvasb.renderall(); canvasb.calcoffset(); }
but in dynamically function defines properties after creating circle object , add circle on canvas, should like: (new way)
function newobjectfunc(type) { var tobject = new fabric[type]({}); tobject['opacity'] = 0.8; tobject['fill'] = 'black'; tobject['left'] = canvasa.width / 2; tobject['top'] = canvasa.height / 2; if (type == 'circle') { tobject['radius'] = 100; } else if (type == 'rect') { tobject['width'] = 50; tobject['height'] = 50; } canvasa.getobjects(); canvasa.add(tobject); canvasa.selection = false; canvasa.renderall(); canvasa.calcoffset(); }
looking easy, there strange issue, because circle don't gets generated, way , don't found reason why.
the properties same. console.log of circle-object (new way) looks correct, too.
https://jsfiddle.net/sascha/052jnlu6/2/
what i'm missing here?
in situation, should avoid direct property assignment , use fabric.object.set() instead:
tobject.set({ opacity: 0.8, fill: 'black', left: canvasa.width / 2, top: canvasa.height / 2 }); if (type == 'circle') { tobject.set('radius', 100); } else if (type == 'rect') { tobject.set({ width: 50, height: 50 }); }
you find updated fiddle here.
Comments
Post a Comment