rotation - how to keep stable objects when i rotate a group object fabric.js -


i use fabric.js library html5 canvas application.

i create group of objects need have stable text objects (stable position), while rotate group object.

  1. to achieve , created group object 2 texts , added inside parent group object.
  2. on 'object:rotation' event , find inside group , keep angle stable :

     if (obj.type == 'group'){                      obj.angle = -actobj.angle;        actobj.setcoords();        canvas.renderall();    } 

please take @ fiddle example :

if change top position of texts , position not stable when rotate, have put top:-5 on 1st text , top:5 on 2nd text. if put top:-10 on 1 text object , top:0 on other , not stable on rotation

var text = new fabric.text(n, {     fontsize: fontsizetable,     fontweight: 'bold',     originx: 'center',     originy: 'center',     top: -5,     fill: 'black' });  text2 = new fabric.text('table name rotonta', {     fontsize: fontsizetable,     fontweight: 'bold',     originx: 'center',     originy: 'center',     top: 5,     fill: 'black' }); 

my jsfiddle example here : http://jsfiddle.net/tornado1979/x5q34etw/55/

you need put group in center setting top 0:

var textsgroup = new fabric.group(texts, {          originx: 'center',          originy: 'center',          top:0,          objectgrouptype: 'texts' }); 

updated fiddle : http://jsfiddle.net/x5q34etw/63/


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -