Update: JSFiddle: https://jsfiddle.net/Qanary/915fg6ka/
I am trying to make my curveText function work (see bottom of this post). It usually works with fabric.js 1.2.0 , but when I upgraded to fabric.js 1.7.9, the bend function detects the text in the wrong positions when two steps are performed sequentially below.
ACTION: - ISSUE 1
Group scale
-text changes (I mean dragging corner points with the mouse to resize).
-setText is called
js fabric 1.2.0:
fabric js 1.7.9
I debugged it, and the reason for this is _updateObjectsCoords in fabricjs, because when I removed it from the code and the 2 actions listed above work fine.
ISSUE 2: But this time, I ran into a problem below, because the elements of the group are incorrectly positioned when adding text to the canvas for the first time.
with _updateObjectsCoords
without _updateObjectsCoords
Here is my function:
var CurvedText = (function() { function CurvedText( canvas, options ){ this.opts = options || {}; for ( 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 ) ); } for ( 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() { for ( 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 with 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) ; } for ( 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; })();