javascript - Fabric JS _updateObjectsCoords alternative? (Migration issue to 1.7.9) -


update: jsfiddle: https://jsfiddle.net/qanary/915fg6ka/

i trying make curvetext function work (see bottom of post). works fabric.js 1.2.0 when updated fabric.js 1.7.9, curving function locates text in wrong positions when below two actions executed sequentially.

actions : - issue 1

-text group scale changed (i mean dragging corner points mouse change size).

-settext called

fabric js 1.2.0:

enter image description here

fabric js 1.7.9

enter image description here

i debugged , reason _updateobjectscoords in fabricjs because when removed code , 2 actions listed above works fine.

issue 2: time have faced below problem group items not correctly located when adding text canvas first time.

with _updateobjectscoords

enter image description here

without _updateobjectscoords

enter image description here

here function:

var curvedtext = (function() {      function curvedtext( canvas, options ){         this.opts = options || {};         ( var prop in curvedtext.defaults ) {             if (prop in this.opts) { continue; }             this.opts[prop] = curvedtext.defaults[prop];         }          this.canvas = canvas;         this.group = new fabric.group([], {selectable: this.opts.selectable,radiusval:this.opts.radius,spacingval:this.opts.spacing,textfliping:this.opts.reverse});         this.canvas.add( this.group ) ;         this.canvas.centerobject( this.group );         this.settext( this.opts.text );         this.canvas.setactiveobject( this.group );         this.canvas.getactiveobject().setcoords();      }      curvedtext.prototype.setobj = function(obj)      {         this.group=obj;     };      curvedtext.prototype.settext = function( newtext ) {          this.opts.top=this.group.top;         this.opts.left=this.group.left;          while ( newtext.length !== 0 && this.group.size() > newtext.length ) {             this.group.remove( this.group.item( this.group.size()-1 ) );         }          ( var i=0; i<newtext.length; i++ ){             if ( this.group.item(i) === undefined ){                 var letter = new fabric.text(newtext[i], {                     selectable: true                 });                 this.group.add( letter );             }             else{                 this.group.item(i).text = newtext[i];             }         }         this.opts.text = newtext;         this._setfontstyles();         this._render();     };      curvedtext.prototype._setfontstyles = function() {         ( var i=0; i<this.group.size(); i++ ){             if( this.opts.textstylename )             {                 if( this.opts.textstylename === 'fontfamily' )                 {                     this.group.item(i).setfontfamily( this.opts.fontfamily );                 }                 if( this.opts.textstylename === 'fontcolor' )                 {                     this.group.item(i).setfill( this.opts.fontcolor );                 }             }             else             {                 this.group.item(i).setfontfamily( this.opts.fontfamily );                 this.group.item(i).setfill( this.opts.fontcolor );             }             this.group.item(i).setfontsize( this.opts.fontsize );             this.group.item(i).fontweight = this.opts.fontweight ;         }     };      curvedtext.prototype._render = function() {         var curangle=0,angleradians=0, align=0;          // object may have been moved drag&drop         if ( this.group.hasmoved() ) {             this.opts.top = this.group.top;             this.opts.left = this.group.left;         }         this.opts.angle = this.group.getangle();         this.opts.scalex = this.group.scalex;         this.opts.scaley = this.group.scaley;         this.opts.radius = this.group.radiusval;         this.opts.spacing = this.group.spacingval;         this.opts.reverse = this.group.textfliping;           // text align         if ( this.opts.align === 'center' ) {             align = ( this.opts.spacing / 2) * ( this.group.size() - 1) ;         } else if ( this.opts.align === 'right' ) {             align = ( this.opts.spacing ) * ( this.group.size() - 1) ;         }          ( var i=0; i<this.group.size(); i++) {             // find coords of each letters (radians : angle*(math.pi / 180)             if ( this.opts.reverse ) {                 curangle = (-i * parseint( this.opts.spacing, 10 )) + align;                 angleradians = curangle * (math.pi / 180);                 this.group.item(i).setangle( curangle );                 this.group.item(i).set( 'top', (math.cos( angleradians ) * this.opts.radius) );                 this.group.item(i).set( 'left', (-math.sin( angleradians ) * this.opts.radius) );             } else {                 curangle = (i * parseint( this.opts.spacing, 10)) - align;                 angleradians = curangle * (math.pi / 180);                 this.group.item(i).setangle( curangle );                 this.group.item(i).set( 'top', (-math.cos( angleradians ) * this.opts.radius) );                 this.group.item(i).set( 'left', (math.sin( angleradians ) * this.opts.radius) ) ;             }         }          // update group coords         this.group._calcbounds();         this.group._updateobjectscoords();         this.group.top = this.opts.top;         this.group.left = this.opts.left;         this.group.savecoords();          this.canvas.renderall();     };      curvedtext.defaults = {         top: 0,         left: 0,         scalex: 1,         scaley: 1,         angle: 0,         spacing:0,         radius:0,         text: '',         align: 'center',         reverse:'',         fontsize:16,         fontweight: 'normal',         selectable: true,         fontfamily:'',         fontcolor:'black',         textstylename:''     };      return curvedtext; })();

this should it, if understood correctly:

fabricjs curved text

just small tweak updatetext() function:

function updatetext() {   var original = canvas.getactiveobject();   canvas.remove(original);   settext();   canvas.getactiveobject().set({     angle: original.angle,     top: original.top,     left: original.left,     scalex: original.scalex,     scaley: original.scaley   }).setcoords();   canvas.renderall(); }

and finally, here's important jsfiddle updated, https://jsfiddle.net/rekrah/pkj82n4b/.

update (v2) - since did plead in bounty make function work, ;-).

change line:

this.group = new fabric.group([], {selectable: this.opts.selectable,name:'arc',radiusval:this.opts.radius,spacingval:this.opts.spacing,textfliping:this.opts.reverse,itemname:'text'});

to this:

this.group = new fabric.group([], {selectable: this.opts.selectable,name:'arc',radiusval:this.opts.radius,spacingval:this.opts.spacing,textfliping:this.opts.reverse,itemname:'text',originx:'center',originy:'center'});

and little more esthetically pleasing might want to...

change line: canvas = new fabric.canvas('c',);

to this: canvas = new fabric.canvas('c',{centeredscaling: true});

and here's original plunker updated again, https://jsfiddle.net/rekrah/c7cjzkfd/.

this leaves updatetext() function had it.

let me know if have other questions. happy help!


Comments

Post a Comment

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more