html5 canvas - Fabric JS resize group -
i have canvas few group. in group 2 text , line, wanna resize selected line using input text. have input text, , when select group in input text height, change value text field , resize group/object have problems "border" element allows me resize , rotate object. when set selectedobject.set({height: 300}); border resizing, scaledobject.item(0).set({height: 300}); line without border, when put resized border not around object, how can resize object correctly using input text?
i have solution group has figure , text, did maintain text size , border width well.
var canvas = new fabric.canvas("c1"); reinit() canvas.on({ 'object:scaling': function(e) { var obj = e.target, w = obj.width * obj.scalex, h = obj.height * obj.scaley, s = obj.strokewidth; console.log(obj.width, obj.scalex, h,w,s) obj._objects[0].set({ 'height' : obj.height, 'width' : obj.width, 'scalex' : 1, 'scaley' : 1, h: h, w: w //top: 1, //left: 1, }); /*e.target.set({ 'height' : h, 'width' : w, 'scalex' : 1, 'scaley' : 1 });*/ } }); canvas.on({ 'object:modified': function(e) { console.log(e) //e.target.set({scalex:1, scaley:1}) group = e.target rect = e.target._objects[0] rect.set({height:rect.h, width: rect.w}) console.log('r',rect.width, group.width) text = group._objects[1] canvas.remove(group) canvas.add(new fabric.group([rect,text], { top: group.top, left: group.left })) } }); function reinit(){ var el = new fabric.rect({ originx: "left", originy: "top", stroke: "rgb(0,0,0)", strokewidth: 1, fill: 'transparent', opacity: 1, width: 200, height: 200, cornersize: 6 }); var text = new fabric.itext('test', { fontsize: 16}); var group = new fabric.group([ el, text ], { width: 200, height: 200, left: 5, top: 5, }); canvas.add(group); canvas.renderall(); }<script src="http://fabricjs.com/lib/fabric.js"></script> <canvas id="c1" width="600" height="500" style="border:1px solid #ccc"></canvas>here fiddle http://jsfiddle.net/davidtorroija/qs0ywh8k/1/
and if not useful have other ways in answers:
how display size on shape after scaled using fabric js?
rect stroke, stroke line mis-transformed when scaled
edit: here have perfect example! uses ellipses , triangles etc http://jsfiddle.net/grandthriftauto/6cdfr/15/
Comments
Post a Comment