Question

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

我正在尝试让我的curveText功能正常工作（请参阅本文的底部）。它通常适用于fabric.js 1.2.0但是当我更新到fabric.js 1.7.9时，当两个动作执行顺序时，弯曲功能将文本定位在错误的位置

行动： - 问题1

- 文本组缩放更改（我的意思是用鼠标拖动角点来改变大小）。

-setText名为

fabric js 1.2.0：

fabric js 1.7.9

我调试了它，其原因是在fabricjs中_updateObjectsCoords，因为当我从代码中删除它时，上面列出的2个动作工作正常。

问题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你可以看到演示

Fabric JS _updateObjectsCoords替代？（迁移问题到1.7.9）

2 个答案:

Fabric JS _updateObjectsCoords替代？ （迁移问题到1.7.9）

2 个答案:

Fabric JS _updateObjectsCoords替代？（迁移问题到1.7.9）