Fabric JS _updateObjectsCoords替代方案？ （遷移問題1.7.9）

Question

更新：的jsfiddle：https://jsfiddle.net/Qanary/915fg6ka/

我試圖讓我的curveText功能工作（見這個帖子的底部）。它通常與fabric.js 1.2.0工作但是當我更新到1.7.9 fabric.js，當低於兩個動作執行順序彎曲功能定位在錯誤位置的文本。

行動： - 第1

-text組規模被改變（我的意思是通過鼠標拖動的角點來改變大小）。

-setText稱爲

面料JS 1.2.0：

面料JS 1.7.9

我調試它和原因那是_updateObjectsCoords在fabricjs，因爲當我從代碼中刪除它，並且我上面列出的2個動作工作正常。

ISSUE 2： 但是這次我遇到了第一次將文本添加到畫布時，組項未正確定位的問題。

與_updateObjectsCoords

沒有_updateObjectsCoords

這裏我的功能：

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; 
})(); 

Answer 1

這應該這樣做，如果我理解正確的話你：

只是一個小的調整，以您的updateText()功能：

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(); 
} 

最後，這裏是你更新了所有重要的jsfiddle，https://jsfiddle.net/rekrah/pkj82n4b/。

更新（V2） - 因爲你沒有在你的慷慨辯護，讓您功能工作，;-)。

改變這一行：

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'}); 

要這樣：

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'}); 

而且把它一點點更美觀的你可能想...

改變這一行：canvas = new fabric.Canvas('c',);

對此：canvas = new fabric.Canvas('c',{centeredScaling: true});

這是您的原始Plunker再次更新，https://jsfiddle.net/rekrah/c7cjzkfd/。

這使您的updateText()函數保持原樣。

讓我知道如果您有任何其他問題。總是樂於幫助！

Answer 2

您可以使用此：https://github.com/EffEPi/fabric.curvedText你可以看到演示